Question

我有一个问题，我正在处理大约四个小时，我完全不知道如何解决它。

我有一个侧边栏菜单（.sidebar-content），当它达到约500 px左右时，我想阻止它滚动（或简单地消失）！页脚。知道怎么做吗？

代码：

<section class="col-md-3 col-xs-hidden sidebar-menu">
<div id="test" class="main col-md-12  pull-right" style="position: fixed;">
<ol class="sidebar-content col-sm-hidden col-xs-hidden">
//some content 

</ol>
</div>
</section>

//content of page

<div class="footer footer-inverse">

js / jQuery代码如下：

$(window).scroll(function () {
    if ($(this).scrollTop() > 700) {
        $(".sidebar-menu").css('visibility', 'visible');

    } 
else if ($(this).scrollTop() < 600) {
        $(".sidebar-menu").css('visibility', 'hidden');
    }

    else {
        $(".sidebar-menu").css('visibility', 'visible');
    }

和css：

.sidebar-menu {
    float: right; 
    position: relative;
    visibility: hidden;

}

.sidebar-content {
    color: #5bc5f2; 
    font-weight: bold; 
    position: fixed;
        top: 75px;

}

目前，侧边栏菜单贴在80px的顶部（很好），基本上我希望它在到达某个点时停止滚动。有什么帮助吗？

Answer 1

$(document).on("scroll",function () {
        if (parseInt($(this).scrollTop()) > $("footer").offset().top-500) {
    $(".sidebar-menu").removeClass("fixed");
    $(".sidebar-menu").hide();
} else {
    $(".sidebar-menu").addClass("fixed");
   $(".sidebar-menu").show();
}}

Answer 2

$(document).on("scroll",function () {
    var offsetToTop = parseInt($(this).scrollTop());
        if (offsetToTop > $("footer").offset().top-500) {
    $(".sidebar-menu").removeClass("fixed");
    $(".sidebar-menu").addClass("absolute");
    $(".sidebar-menu").css("top",offsetToTop)  
} else {
    $(".sidebar-menu").addClass("fixed");
    $(".sidebar-menu").removeClass("absolute");
    $(".sidebar-menu").removeAttr("style");
}}

绝对类中的

只是使位置绝对。

防止侧边栏菜单滚动到页脚下方

2 个答案: