css - 使 div 相对于另一个 div 固定位置，

Question

我开始第一题here : 但是很难为我拥有的每个页面制作效果，所以我想如果我制作我想要固定的 div 而不是固定到屏幕滚动

Very Hard to compute heights with pure math and it doesn't work ultimately as you need to modify the calculation for every single page

代码如下:

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

所以要弄清楚那段代码取决于屏幕的滚动高度。 我需要应用以下效果:

1. 当页面加载时，main_nav div 是position:fixed。
2. 向下滚动
3. 当 main_nav 位于某个 div 之上时:说 20px 它应该停止 position:fixed。<
4. 它应该停在最后的位置。
5. 再次向上滚动。
6. 它应该再次恢复固定的位置。

“这会在某个时候产生 float 效果”

Answer 1

我认识的人给了我这个问题的链接和一个 js 代码，让我把它放在这里 所以在这里，如果它与主题无关，请让我知道

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

}(窗口.jQuery);