修复＆amp;滚动时取消固定元素

Question

我有.SideNav导航我的网站和.Main这是页面的内容。 .SideNav是一名手风琴家，因此有可能将其扩展到高于.Main内容的高度，反之亦然。

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

IF .SideNav < $(document).height() - .SideNav已修复，.Main可以正常滚动。 滚动到 .SideNav < $(document).height() - .SideNav将会固定，因此$(document).height()会.Main正常滚动。然而，当您开始向上滚动时，.SideNav将能够滚动到顶部位置，并在顶部可见时再次固定。

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

• 滚动条
• 的键盘
  • 向上/向下键
  • Page Up / Down Keys
• 的小鼠
  • 鼠标滚轮
  • 鼠标滚轮 - 点击并拖动

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

到目前为止我的代码：

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

Answer 1

蒂姆，如果你已经使用了jQuery，我认为最好的选择就是实现jQuery scroll method。他们已经处理了跨浏览器和不同的滚动选项。在scroll方法中，您可以调用您定义的函数来处理元素的高度，并使用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();
    });