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 | 热门文章
        
            
                                
                    1如何合并两个分支,并自动忽略特定的文件/文件夹？
                
                                
                    2使用Docker部署到生产中:零停机时间
                
                                
                    3React + Redux-router =未捕获错误:期望reducer成为一个函数
                
                                
                    4内存分配到字符串对象？
                
                                
                    5ScrollView未显示第一个项目
                
                                
                    6用于参数检查和其他偏执狂的常见Lisp习语？
                
                                
                    7使用wifi直接和使用wifi热点共享文件之间的区别
                
                                
                    8如果没有第二次调用服务器,请求确认IdentityServer 3不支持自定义声明
                
                                
                    9如何通过子树合并将git存储库与子模块合并到另一个子模块中？
                
                                
                    10使用©符号绘制三角形
                
                                
                    11不能将字符串数组声明为类成员
                
                                
                    12在matlab中运行矩阵的均值
                
                                
                    13警告"使用构建变体包中的属性"是什么意思？
                
                                
                    14使用相同的配置部署多个Content Delivery Server
                
                                
                    15Hamcrest匹配器比较JSON的双值
                
                                
                    16d3.select.style没有在firefox上工作
                
                                
                    17单击动态生成的跨度
                
                                
                    18Play framework 2.4:NoClassDefFoundError:play/api/cache/CachePlugin
                
                                
                    19为什么nullptr_t不是关键字
                
                                
                    20C#:为什么x的最终值与for循环外的值不同？







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

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