jQuery置顶导航

一时失言乱红尘 2022-02-02 19:21 281阅读 0赞

**Html的代码**

<body>
    		<div class="logo_bar">顶部 logo</div>
    		<div class="menu">置顶菜单</div>
    		<div class="menu_pos"></div>
    		<div class="down_con">
    			<p style="color:red">英莱特网站主内容</p>
    			<p>网站主内容</p>
    			<p>网站主内容</p>
    			<p>网站主内容</p>
    			<p>网站主内容</p>
    		</div>
    		<a href="javascript:;" class="totop"></a>
    	</body>

**Css的代码**

<style type="text/css">		
    			 body {
    				margin: 0px;
    			}
    			
    			.logo_bar {
    				width: 960px;
    				height: 200px;
    				background: url(img/bg3.jpg) no-repeat center;
    				background-size: 100%, 100%;
    				margin: 0 auto;
    			}
    			
    			.menu,
    			.menu_pos {
    				width: 960px;
    				height: 50px;
    				margin: 0 auto;
    				background-color: gold;
    				text-align: center;
    				line-height: 50px;
    			}
    			
    			.menu_pos {
    				display: none;
    			}
    			
    			.down_con {
    				width: 960px;
    				height: 1800px;
    				margin: 0 auto;
    			}
    			
    			.down_con p {
    				margin-top: 100px;
    				text-align: center;
    			}
    			
    			.totop {
    				width: 50px;
    				height: 50px;
    				background: url(img/top.jpg) center center no-repeat #000;
    				background-size: 100%, 100%;
    				border-radius: 50%;
    				position: fixed;
    				right: 50px;
    				bottom: 50px;
    				display: none;
    			}
    		</style>

jQuery的代码

<script src="../js/jquery-3.4.1.min.js" type="text/javascript" charset="utf-8"></script>
    		<script type="text/javascript">
    			$(function(){
    				$(window).scroll(function(){
    					var nowTop=$(document).scrollTop();
    					if(nowTop>200){
    						$('.menu').css({
    							 position:'fixed',
    							 left:'50%',
    							 top:0,
    							 marginLeft:-480
    						});
    						$('.menu_pos').show();
    					}
    					else{
    						 $('.menu').css({
    						 position:'static', 
    						 marginLeft:'auto'
    						 });
    						 $('.menu_pos').hide();
    					}
    					 if(nowTop>400){
    						$('.totop').fadeIn();
    						 }
    						else{
    						 $('.totop').fadeOut();
    					 }
    				})
    				$('.totop').click(function(){
    					$('html,body').animate({'scrollTop':0});
    				})
    			})
    		</script>

发表评论取消回复

表情：

评论列表（有 0 条评论，281人围观）

还没有评论，来说两句吧...

相关阅读

相关 Elasticsearch：广告置顶

import org.apache.http.HttpHost; import org.elasticsearch.client.RestClient;

ゝ一纸荒年。/ 2024年03月24日 10:48/ 0 赞/ 92 阅读

相关 Notepad++ 最前置顶 Notepad++ 窗口置顶

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3hpYW9l

分手后的思念是犯贱/ 2023年10月18日 19:28/ 0 赞/ 53 阅读

相关该置顶的文章还是要置顶

1、为了整理系列性的文章，开通了个人博客，有需要的关注下，博客地址“[www.xbeichenbei.com][]”。 ![watermark_type_ZmFuZ3po

朱雀/ 2023年07月05日 14:45/ 0 赞/ 139 阅读

相关 html5 导航栏置顶,html5导航栏横向

html5中怎么样让导航条完全的横向100%显示，附图你里面是不是还有内嵌标签设置了宽度。请注意以下几点一：只能用HTML5 + CSS 二：要保证在不同页面跳转的时候

小灰灰/ 2022年10月05日 10:51/ 0 赞/ 239 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 377 阅读

相关 [置顶][置顶]opencv图像处理4--opencv下鼠标事件

\include<highgui.h> \include<cv.h> \include<stdio.h> //\include<iostream> //鼠标事件

雨点打透心脏的1/2处/ 2022年06月18日 03:09/ 0 赞/ 216 阅读

相关 jQuery置顶导航

Html的代码 <body> <div class="logo_bar">顶部 logo</div> <div class="menu">置顶

一时失言乱红尘/ 2022年02月02日 19:21/ 0 赞/ 282 阅读

相关 js实现导航条置顶

导航条置顶 <ul> <li></li> <li></li> <li></li>

￡神魔★判官ぃ/ 2022年01月28日 00:23/ 0 赞/ 255 阅读

相关置顶博文

欢迎来到我的博客 > 执灯把酒看见归来仍是少年简介原产地:浙江衢州生产日期:2004.10 生产编号:CYW 常用ID:Martian148

秒速五厘米/ 2021年11月04日 15:18/ 0 赞/ 348 阅读

相关微信小程序导航tab切换，跟随滚动置顶

<view class="small_nav { {tabFixed?'small_navFix':''}}" id="tab-con">

àì夳堔傛蜴生んèń/ 2021年09月30日 16:40/ 0 赞/ 429 阅读