当窗口向上滚动时，如何使用粘性侧边栏向上移动

how use sticky sidebar move up when window scroll top

本文关键字：侧边栏 何使用 移动 窗口 滚动      更新时间：2023-09-26

只有当侧边栏底部位于窗口底部时才会粘牢的粘性侧边栏我得到了这个网站（得到了引导粘性的例子）

javascript

$(function() {
    var win = $(window);
    var doc = $(document);
    var wh = win.height();
    var dh = doc.height();
    var sidebar = $('.rightside .stickybar');
    var sot = sidebar.offset().top;
    var sh = sidebar.height();
    var elementToBottom = dh - sot - sh;
    // reset the sidebar width
     var wt = sidebar.width();
     sidebar.width(wt);
    win.scroll(function(){
    var dst = doc.scrollTop();
    var scrollBottom = dh - dst - wh;
   if(scrollBottom <= elementToBottom) {
      sidebar.addClass('fixToBottom');
  } else {
     sidebar.removeClass('fixToBottom');
    }
   });
});

css

 .fixToTop {
   position: fixed;
   top: 50px;
  }
 .fixToBottom {
    bottom: 60px;
    position: fixed;
 }

html

   <header> </header>
     <div class="contents">
        <div class = "leftside"> left</div>
            < div class="righside">
           <div class="stickybar">
              // when move scrolling up and down 
            </div>
         </div> 
       </div>
      <footer> footer </div>

我有两列布局。左列比侧边栏长得多。我希望侧边栏只有在其底部到达浏览器窗口底部时才会粘住。因此，用户可以继续向下滚动左侧栏的内容，而右侧边栏会粘住。我在这里看到了很多棘手的问题，但这种特殊的情况仍然困扰着我。我在左列还有一个粘贴的标题栏，我已经成功地粘贴了它。

看看这个例子，我很快就想到了。

http://www.bootply.com/hVx29SmQ4g

如果你或任何人有任何问题，只要给我发个信息，我就会尽力解释。不过，我对代码进行了注释，所以它应该非常简单。我希望这正是你所需要的！

：：：代码：：

/*
===  JS  ===
============
Author:  Kevin Leegsma
Updated: Feb 10, 2015
Notes:   Coded for Stack Overflow - re: Sticky Sidebar
*/
/* Base function that waits till rest of site loads and then executes */
$(document).ready(function () {
    "use strict";
    /* activate sidebar, this can also be done as in-line HTML using the following line, instead of the Javascript below */
    /*  <div class = "col-xs-4" id = "rightColumn" data-spy = "affix" data-offset-bottom = "200">  */
    $('#sidebar').affix({
        offset: {
            top: 400  /* both TOP and BOTTOM can be used here, tweek to your own needs */
        }
    });
    /*This function gets the WIDTH of the wrapper and maintains it for the SIDEBAR*/
    /*It does this by setting the WRAPPER as the PARENT, it then calls a function to resize the child (SIDEBAR) 
    in this case equal to the parent size.*/
        /*NOTE: Without this function, the AFFIX still works, just doesn't function as nicely as it doesn't follow
        standard Bootstrap grid CSS rules.  */
    $('#sidebar').each(function () {
        var elem = $(this);
        var parentWrapper = $('#sidebarWrapper');
        var childToParentResize = function () {
            var sidebarWidth = $(parentWrapper).width();
            elem.width(sidebarWidth);
        };      
        childToParentResize();
        $(window).resize(childToParentResize);
    });
    /* Alert to inform you the SIDEBAR has become fixed, can be removed/commented, just for testing, but helpful for those new to AFFIX */  
    $('#sidebar').on('affixed.bs.affix', function(){
        alert("The left navigation menu has been affixed. Now it doesn't scroll with the page.");
    });
});

/* CSS used here will be applied after bootstrap.css
===  CSS  ===
=============
Author:  Kevin Leegsma
Updated: Feb 10, 2015
Notes:   Coded for Stack Overflow - re: Sticky Sidebar
--------------------------------------
Layout
-------------------------------------- */
/* Targets the SIDEBAR once the affix has become active */
/* Adjust these to cater to your layout settings */ 
#sidebar.affix{
    top: 10px;
    right: 8.5%;
}

/*
==============
===  HTML  ===
==============
Author:  Kevin Leegsma
Updated: February 10, 2015
Notes:   Coded for Stack Overflow - re: how-use-sticky-sidebar-move-up-when-window-scroll-top
*/
<!-- Main Code -->
<div class="container" id="main">
  <!-- Left column with dummy text -->
  <div class="col-xs-8" id="leftColumn">
    <h1> LEFT COLUMN</h1>
    <h3>With Even More Filler Text!</h3>
    <p>...a bunch of text...</p>
  </div><!--end leftColumn-->
  <!-- Right column/sidebar that affixes itself as the window is scrolled -->
  <!-- Stuck within a col-xs-4 parent element, this is because the AFFIX 
has wonky width controls, they ignore Bootstrap grids and aren't responsive
with this wrapper and the JS however, it resizes well. --> 
  <div class="col-xs-4" id="sidebarWrapper">
    <div id="sidebar" data-spy="affix">
      <h1> SIDEBAR</h1>
      <h3>With Filler!</h3>
      <small>
        <p>...sidebar text/links...</p>
      </small>
    </div><!--end sidebar-->
  </div><!--end sidebarWrapper-->
</div><!--end container-->

我现在不在家的电脑旁，如果到今晚还没有答案，我会举一个例子。然而，如果我正确地阅读了您需要的内容，那么您所需要做的就是通过HTML/CSS 提供一个待修复的元素，即AFFIX属性

<div id="sidebar" data-spy="affix" data-affix-bottom="50">

注->数据粘贴底部是一个偏移号，所以调整它以满足您的需求

或者通过JavaScript$（"#边栏"）.词缀（{偏移：{底部：someValue}}})；

一些有用的链接可以更深入地解释它：http://getbootstrap.com/javascript/#affix和http://goo.gl/8knwd4（滚动侧边栏示例）

相关文章：