Question

我正在使用this jQuery waypoints plugin来浮动我的侧边栏。一切正常，但我需要在页脚上设置一个额外的航点，以便侧栏不会在它上面滚动，不幸的是我不知道如何编写jQuery代码。

I setup a quick jsfiddle，但请耐心等待，因为这是我第一次使用jsfiddle。

任何帮助将不胜感激，因为我坚持如何实现这一目标。

这是我正在使用的当前jQuery代码：

<script>
    $(document).ready(function() {
        $('.sidebar').waypoint('sticky', {
             offset: 264 // Apply "stuck" class when element 264px from top
        });;
    });
</script>

Answer 1

您不需要为此使用插件，您可以轻松地自行完成此操作。只需调整变量即可。

Updated: Here is working jsFiddle.

$(window).scroll(function() {
   var scrollVal = $(this).scrollTop();
    if ( scrollVal >= 0 && scrollVal < 260 ) {
       //between 0 and navigation

        $('.sidebar').removeClass('stuck').css({'margin-top':'0px'});;
        $('.content').css({'margin-left':'0px'});
    }else if ( scrollVal > 260 && scrollVal < 800 ) {
       //between navigation and footer

        $('.sidebar').addClass('stuck').css({'margin-top':'0px'});;
        $('.content').css({'margin-left':'100px'});
    }else if ( scrollVal > 800 ) {
        //beyond footer

        $('.sidebar').removeClass('stuck').css({'margin-top':'540px'});
        $('.content').css({'margin-left':'0px'});
    }
});

一旦到达页脚，就停止浮动侧边栏。 jQuery Waypoints

1 个答案: