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。
向下滚动
当main_nav高于某些div时：说20px它应该停止position:fixed。
它应该站在最后一个位置。
再次向上滚动。
应该再次修复position。

“这会产生浮动效果直到某个点”

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粘性卷轴 * ================================================= ========= * /

！function（$）{

"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）;

使固定的div相对于另一个div，

1 个答案: