反向固定菜单动画

Reverse fixed menu animation

本文关键字：菜单 动画      更新时间：2023-09-26

菜单当前设置为当您打开页面时，它在页面底部可见。当你向上滚动时，黑色菜单面板将从视图中消失，然后带着顶部的徽标重新出现。

是否有一种方法可以逆转它，以便一旦你滚动回黑色菜单将消失并重新出现在页面的底部?

点击此处查看网站

        var distance = $('#content-div').offset().top,
            $window = $(window);
            var didscroll=true;
        $window.scroll(function() {
            if(didscroll==true){
            if ( $window.scrollTop() >= distance ) {
                didscroll = false;
                //alert("r");
                // Your div has reached the top
                jQuery('.header').css({"position":"fixed","top":'-100px',"left":0});
                jQuery('a.logo').css("visibility","visible");
                 jQuery( ".header" ).slideDown( 5000, function() {
                     jQuery(this).css({"top":0});
                 });
            }
            }
        });
        });

当到达断点时删除内联样式。这样的

if ( $window.scrollTop() >= distance ) {
   $(".header").attr({style : ""});
   $("a.logo").attr({style : ""});
}

试试这个…

var oritop = -100;
$(window).scroll(function() { //on scroll,
    var scrollt = window.scrollY; //get the amount of scrolling
    var elm = $(".box"); //get the box we want to make sticky
    if(oritop < 0) {
        oritop= elm.offset().top; //cache the original top offset
    }
    if(scrollt >= oritop) { //if you scrolled past it,
        //make it sticky or else
    }
    else { //otherwise
        //Do what you want to
    }
});
相关文章：