Question

我有2列布局。左栏比侧栏长。我希望侧边栏仅在其底部到达浏览器窗口底部时粘住。因此，当右侧边栏粘住时，用户可以继续向下滚动左列内容。我在这里看到了很多棘手的问题，但是这种特殊的情况仍然让我感到困惑。我在左栏上也有一个坚固的标题栏，我已经成功地坚持了下来。

以下是我在jsfiddle中所做的一些演示！

这里是我正在尝试的js的快速浏览。

    $(function(){
       var headlineBarPos = $('.headlineBar').offset().top; // returns number
       var sidebarHeight = $('.sticky-sidebar-wrap').height();
       var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
       var windowHeight = $(window).height();

       var totalHeight = sidebarHeight + sidebarTop;

    $(window).scroll(function(){ // scroll event 

          var windowTop = $(window).scrollTop(); // returns number

          // fixing the headline bar    
          if (headlineBarPos < windowTop) {
              $('.headlineBar').addClass('sticky').css('top', '0');
          }
          else {
              $('.headlineBar').removeClass('sticky').removeAttr('style');
          }

        if(sidebarHeight < windowTop) {
            $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
        } else {
           $('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');
        }

        console.log(windowTop);

    });


    console.log(headlineBarPos);
    console.log(sidebarHeight);
    console.log(sidebarTop);

    });

Answer 1

我希望我做对了，当侧边栏的底部进入视图，然后坚持？

我在侧边栏的底部（侧边栏内）创建了另一个div。当它出现时，它会坚持下去。

http://jsfiddle.net/Z9RJW/10/

<div class="moduleController"></div> //inside the sidebar

和js

$(function () {


var headlineBarPos = $('.headlineBar').offset().top; // returns number
var moduleControllerPos = $('.moduleController').offset().top; // returns number    
var sidebarHeight = $('.sticky-sidebar-wrap').height();
var sidebarTop = $('.sticky-sidebar-wrap').offset().top;
var windowHeight = $(window).height();

var totalHeight = sidebarHeight + sidebarTop;

$(window).scroll(function () { // scroll event 

    var windowTop = $(window).scrollTop(); // returns number

    // fixing the headline bar    
    if (headlineBarPos < windowTop) {
        $('.headlineBar').addClass('sticky').css('top', '0');
    } else {
        $('.headlineBar').removeClass('sticky').removeAttr('style');
    }

    if (moduleControllerPos < windowTop + windowHeight) {
        $('.sticky-sidebar-wrap').addClass('sticky').css('top', '0');
    } else {
$('.sticky-sidebar-wrap').removeClass('sticky').removeAttr('style');        }






    console.log(windowTop);

});


console.log(headlineBarPos);
console.log(sidebarHeight);
console.log(sidebarTop);

}）;

我希望它有所帮助。

Answer 2

类似的东西：

if (sidebar.top + sidebar.height < window.scrolltop + window.height) {
    // set sticky
}

并设置粘性需要考虑侧边栏可能高于视口，所以：

sidebar.top = sidebar.height - window.height // this will be a negative number

粘贴侧边栏仅在侧边栏底部位于窗口底部时粘住

2 个答案: