Fixed Div Stop At Certain Point jQuery

I want my fixed div to stop scrolling at a certain point on my webpage, however, none of the solutions I have found have actually functioned properly and done what I've wanted...

This is my current jQuery:

var windw = this;
$.fn.followTo = function ( pos ) {
    var $this = this, $window = $(windw);

    $window.scroll(function(e){
        if ($window.scrollTop() > pos) {
            $this.css({
                position: 'absolute',
                top: pos
            });
        } else {
            $this.css({
                position: 'fixed',
                bottom: -10px
            });
        }
    });
};

$('#qF').followTo(800);

This is my HTML:

<div id="qF" class="central theater-dir-adown">
    <img src="data/img/prefs/dir_adown" class="dir-adown">
</div>

And this is my CSS:

.theater-dir-adown{
    cursor: pointer;
    display: inline-block;
    position: fixed;
    bottom: -10px;
    left: calc(100% / 2 - 51px);
    width: calc(75% / 9);
    height: auto;
}

.dir-adown{
    width: 100%;
}

So what I want is the div #qF to stop scrolling at 800px, but the code that I'm using isn't working and the div will continue to scroll down the page. I'm not sure if there is some sort of error in my code but could someone please help me out? Still very new to jQuery..

Thanks

Answers 1

  • add top:'auto' when setting position to fixed

    var windw = this;
    $.fn.followTo = function ( pos ) {
        var $this = this, $window = $(windw);
    
        $window.scroll(function(e){
            if ($window.scrollTop() > pos) {
                $this.css({
                    position: 'absolute',
                    top: pos
                });
            } else {
                $this.css({
                    position: 'fixed',
                    bottom: -10,
                    top:'auto'
                });
            }
        });
    };
    
    $('#qF').followTo(800);
    

    you can add top: pos + $(window).height() to start scrolling from bottom

    http://jsbin.com/fuzutaxiha/1/edit?html,css,js,output


Related Articles