jquery实现的固定位置下拉隐藏上拉显示悬浮导航菜单特效

最新推荐文章于 2022-04-17 00:00:59 发布

Allen_Kao

最新推荐文章于 2022-04-17 00:00:59 发布

阅读量6.5k

点赞数

分类专栏：前端开发css+js

本文链接：https://blog.csdn.net/gsls181711/article/details/41986253

版权

前端开发css+js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>

<head>

  <meta charset="UTF-8">

  <title>jquery固定位置下拉隐藏上拉显示悬浮导航菜单特效代码 </title>

    <link rel="stylesheet" href="css/style.css" media="screen" type="text/css" />

<style type="text/css">
body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}


#lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify}

.yapiskan{
  background-color:#e74c3c; 
  color:white; 
  font-size:24px; 
  padding:5px; 
  text-align:center; 
  position: fixed; 
  left:0; 
  top:0; 
  width:100%; 
  transition: top .5s;
}


.gizle {
  top: -90px;
}
.sabit {
  top:0;
	z-index: 9999;
}
</style>
</head>

<body>

  <header class="yapiskan">LOGO位置</header>
<div id="lipsum">
<p>
这是文章内容啊。。。。
</p>
</div>
</body>
</html>

$(function(){	
    var cubuk_seviye = $(document).scrollTop();
    var header_yuksekligi = $('.yapiskan').outerHeight();
       alert( cubuk_seviye);
    $(window).scroll(function() {
        var kaydirma_cubugu = $(document).scrollTop();

        if (kaydirma_cubugu > header_yuksekligi){$('.yapiskan').addClass('gizle');} 
        else {$('.yapiskan').removeClass('gizle');}

        if (kaydirma_cubugu > cubuk_seviye){$('.yapiskan').removeClass('sabit');} 
        else {$('.yapiskan').addClass('sabit');}				

        cubuk_seviye = $(document).scrollTop();	
     });
});

Allen_Kao

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
jquery实现的固定位置下拉隐藏上拉显示悬浮导航菜单特效

jquery固定位置下拉隐藏上拉显示悬浮导航菜单特效代码 body{background-color:white; padding-top:10px; font:100 14px 'Open Sans'}#lipsum{width:690px; margin:30px auto; color:#34495e;text-align:justify}.yapiskan{
复制链接

扫一扫

专栏目录