粘性侧边栏仅在侧边栏底部位于窗口底部时才粘贴 [英] Sticky Sidebar that only sticks when sidebar bottom is at window bottom

问题描述

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

I have a 2 column layout. The left column is way longer than the sidebar. I want the sidebar only to stick when its bottom reaches the bottom of the browser window. So the user can continue to scroll down the left column content while the right sidebar sticks. I've seen a lot of sticky questions here, however this particular situation still stumps me. I also have a sticking headline bar on the left column that i've successfully gotten to stick.

这是我在 jsfiddle 中所做的演示！

Here's a demo of what I've done in jsfiddle!

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

and here's a quick look at the js I am trying out.

    $(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);

    });

推荐答案

我希望我做对了，当侧边栏的底部进入视图时，再坚持吗?

I hope I got it right, when the bottom of the sidebar comes into the view, then stick?

我在侧边栏底部(在侧边栏内)创建了另一个div. 当它出现时，它就会粘住.

I created another div at the bottom of the sidebar (inside the sidebar). When that comes into view, it sticks.

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);

});

希望对您有帮助.

这篇关于粘性侧边栏仅在侧边栏底部位于窗口底部时才粘贴的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！