There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
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;
}