修复,滚动时取消固定元素

Fixing & Unfixing Element When Scrolling

本文关键字：元素 取消 滚动 修复      更新时间：2023-09-26

我有一个.SideNav浏览我的网站和.Main这是页面的内容。.SideNav是相应的，因此有可能将其扩展到大于.Main含量的高度，反之亦然。

我想要达到的是，当你在页面上滚动;

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

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

  • 滚动条
    • 键盘
    • 向上/向下键
    • 页面上下键
    • 老鼠
    • Mousewheel
    • 鼠标滚轮-点击并拖动

我一直在浏览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
                });
            }
        }   
    });
});

Tim，如果你已经在使用jQuery，我认为最好的选择是实现jQuery滚动方法。他们已经处理了跨浏览器和不同的滚动选项。在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();
    });
相关文章：