There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.
Close

Documentation
Introduction
Installation
Selectors
Events
Action commands
Conditional pseudo-selectors
Variables and JavaScript
Control flow
Single Page Applications
Active CSS Components
Examples
Reusable Components
Debugging
Technical articles
Downloads
About
Processing...
This may take a few seconds.

if-scrolltop-less

Syntax

if-scrolltop-less: integer;

This conditional action will return true if the scrolltop of the event selector is less than that specified.

integer = The scrolltop value to check.

For example, this will return true if the body has a scrolltop less than 100.

@conditional scrollLessThan101 {
    if-scrolltop-less: 101;
}

body:scrollLessThan101:scroll {
    #myFloatingMenu {
        remove-class: .fixMenu;
    }
}

Note: You can also run this with any valid element as the event selector, not just the body.

if-scrolltop-less

Toggle the button to open/close a fix floating div, and then scroll up and down.

Magically changing text

Reset example

body:if-exists(#ifScrollTopHoverer):if-scrolltop-greater(1000):scroll {
    #ifScrollTopHoverer {
        render: "Take me higher!";
    }
}

body:if-exists(#ifScrollTopHoverer):if-scrolltop-less(200):scroll {
    #ifScrollTopHoverer {
        render: "Take me Lower!";
    }
}

#ifScrollTopButton:click {
    #ifScrollTopHoverer {
        toggle-class: .switchMeOn;
    }
}

<p>Toggle the button to open/close a fix floating div, and then scroll up and down.</p>
<button id="ifScrollTopButton">Toggle div on/off</button>
<div id="ifScrollTopHoverer">Magically changing text</div>

#ifScrollTopHoverer {
    position: fixed;
    top: 100px;
    opacity: 0;
    transition: opacity 250ms linear;
    pointer-events: none;
    background-color: darkgreen;
    color: #fff;
    font-size: 26px;
    padding: 40px;
    border-radius: 20px;
    z-index: 10;
}

#ifScrollTopHoverer.switchMeOn {
    opacity: 1;
}
Conditional pseudo-selectors: if-scrolltop-greater Conditional pseudo-selectors: if-selection