Question

因此，当我注意到页脚的顶部从固定位置到具有特定给定高度的绝对位置并坚持页脚时，我正试图获得我固定的100％高度侧边栏。

HTML结构

<header ng-include="'app/views/partials/application-specific/top-navbar.html'"></header>
<section ng-include="'app/views/partials/user/top-back-user.html'"></section>
<div class="content">
  <aside class="aside sidebar" id="stick" ng-include="'app/views/partials/user/sidebar-user.html'" style="max-height: 100% !important;"></aside>

 <div class="content-wrapper" id="content-wrapper" ui-view>
 </div>
</div>
<footer class="footer" id="footer" ng-include="'app/views/partials/user/footer.html'"style="padding-bottom: 0px; height:300px;" ></footer>

1-第一个javascript代码用于在150px滚动后将侧边栏固定到顶部。

var windowWidth = $(window).width();
if (windowWidth > 991) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 150) {
            $('#menu1-fixed').addClass('fixed1');
            $('.fado').slideUp();
            $('.fado').slideUp(600);
        } else {
            $('#menu1-fixed').removeClass('fixed1');
            $('.fado').slideDown();
            $('.fado').slideDown(600);
        }
    })
};

CSS

.fixed1 {
   position:fixed !important; top: 0em !important; margin-top: 3.4em !important;
}

2-第二个代码是从顶部滚动900px后用绝对和特定高度替换固定位置。在那种情况下，我想改变900px来检测页脚的顶部，并在将类改为绝对后。

var windowWidth = $(window).width();
if (windowWidth > 991) {
    $(window).scroll(function() {
        if ($(this).scrollTop() > 900) {
            $('#menu1-fixed').addClass('main-sidebar2');
        } else {
            $('#menu1-fixed').removeClass('main-sidebar2');
        }
    })
};

CSS

.main-sidebar2 {
  position: absolute !important;
  height:600px !important;
  min-height: 580px !important;
  top:1000px !important;
}

Answer 1

请尝试以下示例，它将正常工作。

$( document ).ready(function() {
    var e = $("#stick");
    var lastScrollTop = 0;
    var firstOffset = e.offset().top;
    var lastA = e.offset().top;
    var isFixed = false;
    $(window).scroll(function(event){
        if (isFixed) {
            return;
        }
        var a = e.offset().top;
        var b = e.height();
        var c = $(window).height();
        var d = $(window).scrollTop();
        if (b <= c - a) {
            e.css({position: "fixed"});
            isFixed = true;
            return;
        }           
        if (d > lastScrollTop){ // scroll down
            if (e.css("position") != "fixed" && c + d >= a + b) {
                e.css({position: "fixed", bottom: 0, top: "auto"});
            }
            if (a - d >= firstOffset) {
                e.css({position: "absolute", bottom: "auto", top: lastA});
            }
        } else { // scroll up
            if (a - d >= firstOffset) {
                if (e.css("position") != "fixed") {
                    e.css({position: "fixed", bottom: "auto", top: firstOffset});
                }
            } else {
                if (e.css("position") != "absolute") {
                    e.css({position: "absolute", bottom: "auto", top: lastA});
                }               
            }
        }
        lastScrollTop = d;
        lastA = a;
    });
}
});

固定100％高度侧边栏，滚动粘贴到页脚后

1 个答案: