使固定位置的div相對於另一個div，

Question

我開始了第一個問題here：但是很難爲每個單獨的頁面生效，所以我想如果我創建了我想要固定的div固定在屏幕滾動

很難計算與純數學的高度，當你需要修改計算每一個單頁

這最終並沒有工作是代碼：

<script >window.addEventListener("scroll",function() { 
    if(window.scrollY >= 148) { 
    document.getElementById('main_nav').style.position = 'absolute'; 
    document.getElementById('main_nav').style.bottom = '65%'; 
    } 
    if(window.scrollY <= 148){ 
    document.getElementById('main_nav').style.position = 'fixed'; 
    document.getElementById('main_nav').style.top = '42%'; 
    } 
});</script> 

所以弄清事情這段代碼取決於屏幕的滾動高度。 我需要辦理以下效果：當頁面加載main_nav DIV是position:fixed

1. 。
2. 在向下滾動
3. 時main_nav高於一些div由：說20px應該停止position:fixed。
4. 它應該停留在最後的地方。
5. 再次滾動。
6. 它應該還原position再次固定。

「這造成浮動的效果，直到某個時刻」

Answer 1

我認識的人給我的鏈接，這個問題和JS代碼，並告訴我過去在這裏 所以在這裏它，如果它是不相關在主題請讓我KNW

Someone I know gave me the link for this question and a js code and told me to past it here 

所以在這裏它，如果它是不相關的主題，請讓我知道，我會刪除它

/* =========================================================== 

* fixate.js v1 *使用： *靈感來自原jquery粘性卷軸 * ============================ ============================== */

！函數（$）{

"use strict"; // jshint ;_; 

/* FIXATE PUBLIC CLASS DEFINITION 
* =============================== */ 

var Fixate = function (element, options) { 
     this.init(element, options); 
    } 

Fixate.prototype = { 

    constructor: Fixate 

    , init: function (element, options) { 
     var self, opts; 

     this.$element = $(element); 
     opts = this.options = this.getOptions(options); 

     this.zindex = this.$element.css('z-index'); 
     this.$window = $(window); 
     this.$doc = $(document); 

     this.$bottomCap = opts.bottomCapEl ? $(opts.bottomCapEl) : false; 
     this.$topCap = opts.topCapEl ? $(opts.topCapEl) : false; 


     this.bottomOffset = opts.windowInset.bottom || 0; 
     this.topOffset = opts.windowInset.top || 0; 

     this.top = this.$element.offset().top - parseFloat(this.$element.css('margin-top').replace(/auto/, 0)) - this.topOffset; 
     this.eto = this.$element.offset().top; 

     this.origTop = this.$element.css('top'); 
     this.origBottom = this.$element.css('bottom'); 

     this.z = (this.zindex === '0' || this.zindex === 'auto') ? opts.zindex : this.zindex; 
     this.bh = (this.$bottomCap) ? this.$bottomCap.outerHeight(true) : 0; 

     self = this; 

     this.$window.on('scroll', function (e) { 
      self.fixate(); 
     }); 

     this.$doc.on('DOMNodeInserted DOMNodeRemoved', function(e){ 
      //Called when elements are added or removed from DOM 
      self.fixate(); 
     }); 
    } 

    , getOptions: function (options) { 
     options = $.extend({}, $.fn['fixate'].defaults, options, this.$element.data()); 

     return options; 

    } 

    , fixate: function(){ 
     var s = this.$window.scrollTop() 
      , h = this.$element.outerHeight(true); 

     // Calc offset onscroll to get most updated results - incasse ajaxed els come in 
     this.bco = (this.$bottomCap) ? this.$bottomCap.offset().top : 0; 
     this.tco = (this.$topCap) ? this.$topCap.offset().top + this.$topCap.outerHeight(true) : 0; 
     this.dh = this.$doc.height(); 

     if(this.options.windowEdge === 'top'){ 
      this.fixToTop(s, h); 
     } else { 
      this.fixToBottom(s, h); 
     } 
    } 

    , fixToTop: function (s, h) { 
     var bco = this.bco 
      , to = this.topOffset 
      , eto = this.eto 
      , bo = this.bottomOffset 
      , point = bco - h - bo - to; 

     if (s >= this.top) { 
      this.$element.css({ 
       'position': 'fixed', 
       'top': to, 
       'z-index': this.z 
      }); 
      this.fixTouchDevice(); 

      // Bottom cap calc -check cpu factor 
      if (s >= point) { 
       this.$element.css({ 
        'top': Math.round(point - this.top + parseFloat(this.origTop)), 
        'position': 'absolute' 
       }); 
      } 

     } else { 
      this.$element.css({ 
       'position': '', 
       'top': this.origTop, 
       'z-index': this.zindex 
      }); 
     } 
    } 

    , fixToBottom: function (s, h) { 
     var bco = this.bco 
      , to = this.topOffset 
      , eto = this.eto 
      , bo = this.bottomOffset; 

     if (s >= (bco - h - bo - to - this.top)) { 
      this.$element.css({ 
       'bottom': Math.round(this.dh-(bco - bo)), 
       'position': 'absolute' 
      }); 
      this.fixTouchDevice(); 

     } else { 
      this.$element.css({ 
       'position': 'fixed', 
       'bottom': bo, 
       'z-index': this.z 
      }); 

     } 
    } 

    , fixTouchDevice: function(){ 
     //stick the footer at the bottom of the page if we're on an iPad/iPhone due to viewport/page bugs in mobile webkit 
     if(navigator.platform == 'iPad' || navigator.platform == 'iPhone' || navigator.platform == 'iPod') { 
      this.$element.css("position", "static"); 
     } 
    } 
} 


/* FIXATE PLUGIN DEFINITION 
* ========================= */ 

$.fn.fixate = function (option) { 
    return this.each(function() { 
     var $this = $(this), 
      data = $this.data('fixate'), 
      options = typeof option == 'object' && option; 
     if (!data) $this.data('fixate', (data = new Fixate(this, options))); 
     if (typeof option == 'string') data[option](); 
    }) 
} 

$.fn.fixate.Constructor = Fixate; 

$.fn.fixate.defaults = { 
    windowInset: { 
     top: 0, 
     bottom: 0 
    } 
    , windowEdge: 'top' 
    , bottomCapEl: 'footer' 
    , topCapEl: 'header' 
    , zindex: 5 
}; 

} （window.jQuery）;