如何向下滚动页面，一旦你点击边栏的末端，它就会粘在页面的底部 [英] How to scroll down a page and once you hit the end of the sidebar, have it stick to the bottom of the page

问题描述

我想重现此侧栏：

http://www.fastcodesign.com/3020546/innovation-by-design/would -steve-jobs-have-become-steve-jobs-using-a-computer-designed-by-st

似乎是你的向下滚动页面，但一旦你到达侧边栏的底部（并且只要仍有更多的内容显示在主容器中，侧边栏粘在网页的底部，但当你向上滚动时，

如何重现这个？

解决方案

我的大部分答案都是从这个










$ $ b

这是一个基本的body / sidebar布局，带有sidebarAnchor，我们将在我们的JavaScript / jQuery中使用。

  div class =container> 
< div class =body> 
<！ -  Body content  - > 
< / div> 
< div id =sidebarAnchor>< / div> 
< div class =sidebarid =sidebar> 
<！ - 侧边栏内容 - > 
< / div> 
< / div> 
  

CSS。这里最重要的是我们将用jQuery添加的.sticky类。

  div.container {
 overflow：hidden; 
 width：100％; 
} 
 
 div.body {
 width：45％; 
 float：left; 
} 
 
 div.sidebar {
 width：45％; 
 float：right; 
} 
 
 .stick {
 position：fixed; 
 bottom：0; 
 right：0; 
} 
  

和jQuery / JS。

  $（document）.ready（function（）{
 // Cache selectors for faster性能。
 var $ window = $（window），
 $ sidebar = $（'＃sidebar'），
 $ sidebarAnchor = $（'＃sidebarAnchor'）; 
 
 //在滚动事件上运行
 $ window.scroll（function（）{
 var window_top = $ window.scrollTop（）; 
 var div_top = $ sidebarAnchor.offset ）.top; 
 if（window_top> div_top）{
 //使div粘稠。
 $ sidebar.addClass（'stick'）; 
 $ sidebarAnchor.height $ sidebar.height（））; 
} 
 else {
 //不粘贴div。
 $ sidebar.removeClass（'stick'）; 
 $ sidebarAnchor。 height（0）; 
} 
}）; 
}）; 
  

I am trying to reproduce this sidebar:

http://www.fastcodesign.com/3020546/innovation-by-design/would-steve-jobs-have-become-steve-jobs-using-a-computer-designed-by-st

It seems to be that your just scrolling down the page, but once you get to the bottom of the sidebar (and as long as there is still more content to display in the main container,) the sidebar sticks to the bottom of the webpage, but when you scroll back up, the side bar scrolls back up..

How can you reproduce this?

Cheers!

解决方案

Most of my answer is borrowed from this question.

Here is a basic body/sidebar layout with a sidebarAnchor we will use in our JavaScript/jQuery.

<div class="container">
  <div class="body">
  <!-- Body content -->
  </div>
  <div id="sidebarAnchor"></div>
  <div class="sidebar" id="sidebar">
  <!-- Sidebar Content -->
  </div>
</div>

The CSS. Most important here is the .sticky class we will add with jQuery. The rest is just there for the demo layout.

div.container {
    overflow: hidden;
    width: 100%;
}

div.body {
    width: 45%;
    float: left;
}

div.sidebar {
    width: 45%;
    float: right;
}

.stick {
    position: fixed;
    bottom: 0;
    right: 0;
}

And the jQuery/JS. See comments for explanation.

$(document).ready(function() {
    // Cache selectors for faster performance.
    var $window = $(window),
        $sidebar = $('#sidebar'),
        $sidebarAnchor = $('#sidebarAnchor');

    // Run this on scroll events.
    $window.scroll(function() {
        var window_top = $window.scrollTop();
        var div_top = $sidebarAnchor.offset().top;
        if (window_top > div_top) {
         // Make the div sticky.
         $sidebar.addClass('stick');
         $sidebarAnchor.height($sidebar.height());
        }
        else {
            // Unstick the div.
            $sidebar.removeClass('stick');
            $sidebarAnchor.height(0);
        }
    });
});

这篇关于如何向下滚动页面，一旦你点击边栏的末端，它就会粘在页面的底部的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！