15赞

导航过渡

作者：勤奋的瞌睡猪_715 | 2023-09-09 17:16

如何解决《导航过渡》经验，为你挑选了1个好方法。

我是jQuery的新手,在我去的时候正在教自己,但我正在努力弄清楚如何指出在向上滚动时白色导航背景向上移动以显示面板1上的白色导航文本？

我正在使用bartaile.com作为灵感,我正在对bartaile的导航所做的更改是--->在用户滚动浏览导航隐藏的第一个面板后,只有当用户向上滚动时才会再次显示导航,面板1返回到白色导航背景向下滑动以隐藏和显示白色文本.

任何帮助或提示,以了解如何做到这一点将不胜感激!:-)

var lastScrollTop = 0;
$(window).on('scroll', function() {
    var header = $('.header');
    var stage0 = $('.stage-0');
    var scrollTop = $(window).scrollTop();
    if (scrollTop > lastScrollTop) {
        // down scroll
        if (scrollTop > stage0.offset().top + stage0.height()) {
            header.addClass('hide');
        }
    } else {
        // up scroll
        if (scrollTop <= stage0.offset().top + stage0.height()) {
            header.removeClass('headerBGchange headerLIchange');
			
        } else {
            header.removeClass('hide').addClass('headerBGchange headerLIchange BGupTranistion');
        }
    }
    lastScrollTop = scrollTop;
});


.header {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    height: 80px;
    -webkit-transition: top .5s ease;
    transition: top .5s ease;
    position: fixed;
    width: 100%;
    top: 0;
    background-color: transparent;
    overflow: hidden;
}

.header ul {
    margin: 20px;
    padding: 0;
}

.header ul li {
    display: inline-block;
    margin-right: 20px;
    color: white;
}

.header ul li:last-child {
    margin-right: 0;
}

.hide {
    top: -80px;
}

.headerBGchange {
    Background: white;
}

.BGupTranistion {
}

.header.headerLIchange ul li {
    color: Blue;
}

.header.headerLIchange {
	border-bottom: 1px solid black;
}'

	




    

    
        
            
            
                
                    
                
            

            
                勤奋的瞌睡猪_715            

            
                这个屌丝很懒，什么也没留下！            
            
            

                                
                    
                    关注作者
                            

        
    


    
        Tags | 热门标签
        
            
                                
                    actionscrip
                
                                
                    bash
                
                                
                    c#
                
                                
                    c++
                
                                
                    c语言
                
                                
                    erlang
                
                                
                    flutter
                
                                
                    go
                
                                
                    golang
                
                                
                    java
                
                                
                    javascript
                
                                
                    lua
                
                                
                    node.js
                
                                
                    perl
                
                                
                    php
                
                                
                    python
                
                                
                    scala
                
                                
                    typescript
                
                                
            
        
    


    
        RankList | 热门文章
        
            
                                
                    1Powershell  - 跳过无法访问的文件
                
                                
                    2Bootstrap portofolio  - 空网格空间
                
                                
                    3ASP.NET 5针对dnx451/dnx46性能
                
                                
                    4为什么URI.escape()标记为过时,这个REGEXP :: UNSAFE常量在哪里？
                
                                
                    5应用程序无法启动,出现错误"无法启动子项:Odt.Endpoint"
                
                                
                    6C++反转索引器和数组名称
                
                                
                    7闭包 - 捕获变量和将它们作为参数读取之间的差异
                
                                
                    8从事实中返回名称列表
                
                                
                    9我如何通过电子邮件向Flask发送错误日志？
                
                                
                    10C++:将结构的类型更改为子类型
                
                                
                    11在Laravel中将id列添加到数据透视表的任何优点？
                
                                
                    12sleep命令执行不是我的预期
                
                                
                    13Java开发服务器错误地抛出FeatureNotEnabled异常？
                
                                
                    14在TextView中使用locale(ltr/rtl)作为重力
                
                                
                    15从数组id更新has_many关联
                
                                
                    16为什么我们真的需要多个netty老板线程？
                
                                
                    17在Seaborn隐藏轴标题
                
                                
                    18神秘的语法onClick = {:: this.submit}
                
                                
                    19100%宽度分为3*33%div
                
                                
                    20如果没有处理,则抛出相同的异常,或者构造一个新的异常？







    DevBox开发工具箱 | 专业的在线开发工具网站    京公网安备 11010802040832号  |  京ICP备19059560号-6 

    Copyright © 1998 - 2020 DevBox.CN. All Rights Reserved  devBox.cn 开发工具箱  版权所有