滚动时固定和取消固定元素答案

【问题标题】：Fixing & Unfixing Element When Scrolling滚动时固定和取消固定元素
【发布时间】：2016-10-12 21:07:45
【问题描述】：

我有一个.SideNav 来浏览我的网站，.Main 这是页面的内容。 .SideNav 是一个手风琴，因此它可以扩展到比 .Main 内容更大的高度，反之亦然。

我想要实现的是当你在页面上滚动时；

IF .SideNav < $(document).height() - .SideNav 是固定的，.Main 可以正常滚动。 IF .SideNav < $(document).height() - .SideNav 将在您滚动到并因此大于$(document).height() 时变为固定，而.Main 正常滚动。但是，当您开始向上滚动时，.SideNav 将能够滚动到顶部位置，并在顶部可见时再次固定。

结合所有页面滚动方法以及跨浏览器兼容性；

滚动条
键盘
- 向上/向下键
- 向上/向下翻页键
鼠标
- 鼠标滚轮
- 鼠标滚轮 - 单击并拖动

我一直在 StackOverflow 上浏览多个问题和答案，这些问题和答案非常有用，例如我当前的滚动方向检测，但是当您单击鼠标滚轮时这不起作用并且我无法解决我的主要问题。

到目前为止我的代码：

jQuery(document).ready(function ($) {
    'use strict';

    var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel"; //FF doesn't recognize mousewheel as of FF3.x
    $(document).bind(mousewheelevt, function(e){

        var evt = window.event || e; //equalize event object
            evt = evt.originalEvent ? evt.originalEvent : evt; //convert to originalEvent if possible               
        var delta = evt.detail ? evt.detail*(-40) : evt.wheelDelta; //check for detail first, because it is used by Opera and FF
        var wh = $(window).height();
        var spt = $(document).scrollTop();
        var spb = $(document).scrollTop() + wh;
        var mainDiv = $('.Main').height() + $('.Main').offset().top;

        if(delta > 0) {
            console.log('Up');
        }
        else{
            if(mainDiv <= spb) {
                console.log('mainDIV: ' + mainDiv + ' spb: ' + spb);
                var te = '-' + (mainDiv - wh) + 'px';
                $('.Main').css({
                    'position'  : 'fixed',
                    'top' : te
                });
            }
        }   
    });
});

【问题讨论】：

标签： javascript jquery

【解决方案1】：

Tim，如果您已经在使用 jQuery，我认为最好的选择是实现 jQuery scroll method。他们已经处理了跨浏览器和不同的滚动选项。在滚动方法中，您可以调用您定义的函数来处理元素的高度和用户的滚动位置scrollTop。这是我所做的一些工作的示例，其中一侧可能比另一侧短（添加的额外数字是为了说明填充和在正确的时刻停止）：

    var scrollPosSetup = function(){

        var mainHeaderHeight     = $('.hero').outerHeight() + 100;
        var footerHeight         = $('footer').outerHeight() + $('.logo-bar').outerHeight() + 240;
        var footerScrollPos      = $('html').height() - (footerHeight + sidebarWrapperHeight);
        var rightSide = (window.innerWidth < 961) ? '30px' : '10%';

        if (window.innerWidth > 767) {

            if($(document).scrollTop() > mainHeaderHeight &&
                $(document).scrollTop() < footerScrollPos) {
                $contactContainer.css({
                    'position' : 'fixed',
                    'top' : '0px',
                    'right' : rightSide
                });
            } else if ($(document).scrollTop() >= footerScrollPos ) {
                $contactContainer.css({
                    'position' : 'relative',
                    'top' : footerScrollPos - 500,
                    'right' : ''
                });
            } else {
                $contactContainer.css({
                    'position' : 'relative',
                    'top' : '',
                    'right' : '',
                    'bottom' : ''
                });
            }
        }
    };

    $(window).scroll(function ( e ) {
        scrollPosSetup();
    });

【讨论】：