（滚动出现）固定导航条

最新推荐文章于 2021-06-03 07:01:45 发布
最新推荐文章于 2021-06-03 07:01:45 发布
阅读量132 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/gxywb/p/9429875.html
版权 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			*{
				margin: 0;
				padding: 0;
			}
			img{
				display: block;
				margin: 0 auto;
			}
			.menu.f{
				position: fixed;
				top: 0;
				left: 50%;
				margin-left: -800px;
			}
		</style>
		<script src="../1.10.2.jquery.min.js"></script>
	</head>
	<body>
		<img src="img/01.jpg" alt="" />
		<img src="img/02.jpg" class="menu" />
		<img src="img/03.jpg" alt="" />
	</body>
	<script>
		$(window).scroll(function(){
//			获得滚动上去的距离
			var st=$(document).scrollTop();
			document.title=st;
			if(st>194){
				$(".menu").addClass('f');
			}else{
				$('.menu').removeClass('f');
			}
		})
	</script>
</html>

 

转载于:https://www.cnblogs.com/gxywb/p/9429875.html

weixin_30522095
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
顶部浮动固定导航条
10-13
在网页设计中，"顶部浮动固定导航条"是一种常见的用户界面设计模式，它能提供一致的导航体验，无论用户在页面的哪个位置滚动，导航条始终保持在屏幕的顶部可见。这种设计方法通常用于大型网站或内容丰富的页面，以...
CSS实现导航固定的、左右滑动的滚动条制作方法
11-20
在网页设计中，创建一个固定在顶部且支持左右滑动的导航栏是一个常见的需求，尤其在移动设备上，这样的设计可以有效地节省屏幕空间并提供良好的用户体验。本文将详细讲解如何使用CSS来实现这一功能。 首先，为了...
滚动条 滚动后 导航栏出现_滚动模糊的网站导航栏
cungui5726的博客
08-22 281
滚动条 滚动后 导航栏出现Another popular interface pattern, one that gained particular ascendancy after the release of iOS 7, is a “frosted” navigation bar that blurs page content scrolled behind it. It might app...
滚动cell 显示隐藏导航栏
YST的博客
12-11 559
demo：https://github.com/YST521/HiddenNa.git 关于滚动cell 显示或者隐藏导航栏主要是根据scroll滑动拿到竖直方向的 滚动距离，通过距离判断是否隐藏显示隐藏 导航栏。 这个一般可以用于 UIScrollerView和tabView. 本demo 是隐藏原有的导航栏 ，通过自定义一个View 代替原有的导航栏。通过纵向滚动的距离 渐变显示隐藏导航
Android视频滚动字幕逐字显示控件（类似K歌歌词逐字播放效果）
11-29
Android视频字幕滚动逐字显示效果控件，视频字幕逐字滚动显示效果,类似K歌歌词逐字播放效果，最近几年视频越来越火爆，大家对视频对字幕也要求比较高，很多需求类似K歌的歌词播放效果，也就是字幕逐字播放显示效果，字幕滚动效果。
html出现滚动条页面闪动,css解决滚动条出现造成页面晃动的问题
weixin_39907157的博客
06-03 3186
窗体默认是没有滚动条的，而HTML的内容是自上而下加载，就会发生一开始没有滚动条，后来突然出现滚动条，此时页面的可用宽度发生变化，水平方向的内容会发生晃动，尤其是水平居中显示的内容，出现滚动条后会重新计算。解决方法：一、简单的做法是html {overflow-y: scroll;}当页面注定要出现滚动条的话，可以用此方法，让滚动条从一开始就显示出来，即使内容一屏能展示也会出现滚动条，这里有点不优...
监测鼠标滚轮的上下滚动来实现导航条显示隐藏
dream_halo的博客
03-19 2987
$(document).on("mousewheel DOMMouseScroll", function (e) {     var delta = (e.originalEvent.wheelDelta &amp;&amp; (e.originalEvent.wheelDelta &gt; 0 ? 1 : -1)) || // chrome &amp; ie (...
jQuery 顶部导航跟随滚动条滚动固定浮动在顶部
10-25
主要介绍了通过jQuery实现的顶部导航跟随滚动条滚动固定浮动在顶部,需要的朋友可以参考下
jQuery原生左侧栏固定导航条(支持展开折叠)
06-05
首先，"固定导航条"（Fixed Navigation Bar）是一种常见的网页布局技术，它可以使导航条在用户滚动页面时始终保持在屏幕顶部或侧边，确保用户随时可以访问主要的链接和功能。在CSS中，我们可以使用`position: fixed`...
滚动条滚动固定div
02-03
滚动条滚动固定div是一种常见的网页布局技术，它在用户滚动页面时使特定div元素保持在视口的可见位置，提供了一种优秀的用户体验，特别是在内容丰富的网站或应用中。这种效果通常被称为“粘性导航”或“固定定位”。...
浏览器滚动到一段距离，绝对定位的导航出现
沫沫酱
01-22 3639
具体效果是，浏览器滚动到一定距离的时候，fixed绝对定位的导航会显示，当滚动到小于这个距离的时候，导航会隐藏。 js部分：     function getTop() {         var mytop = $(document).scrollTop();         if (mytop > 400) {             $(".fixed_bann
向下滚动隐藏导航栏,向上滚动显示
CrazBarry的博客
07-06 9606
Document body{ margin:0; padding: 0; height: 3000px; } #fix_nav{background-color: #ccc;} .nav{width:980px; margin:0 auto;} .nav li{display:inline-block; *display:inline; *zoom:1; margin:0 10
HTML页面上面固定下面滚动的实现
lcathm的专栏
12-15 4760
http://blog.chinaunix.net/uid-14767524-id-2785539.html 在页面设计时，有时会碰到上边一小部分要固定（比如是一个动态生成的标题，高度不确定），而下边的具体内容则需要滚动显示的情形(在不使用框架集合的情况下)，今天自己试着写了一下，代码如下： http://www.w3.org/1999/xhtml">      CSS Test   
web移动端实现点击导航，滑动到网页中的指定位置（JS实现滑动锚点定位）
qq_42097490的博客
03-31 2403
主要功能： 1.初始页面隐藏导航栏 2.滑动到一定位置导航栏显示 3.滑动到对应模块导航栏对应加上样式 4.有锚点，点击导航栏滑动到对应内容 效果图 直接上代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="js/jquery-3.2.1.min.js" &gt
滚动条显示导航栏
chen2745213271的博客
05-29 1133
首先写一个简易的顶部导航栏，并写上一些简易的CSS样式来装饰一下。如下图 注意，CSS里我在ul标签上写了固定定位且top赋值为-50px，因为ul标签的高度是50px而我又写了固定定位这时候把top赋值为-50px的话就会刚刚好把ul标签带到屏幕上面，也就会看起来把ul标签隐藏了 HTML部分下面有个div我是给了1200px的高度，因为这是一个简易的案例，所以我用了个盒子把页面顶了起来，这样子页面上就会有滚动条供我们使用。 下面是js部分了，首先给文档绑定滚动条滚动事件并使用事件对象，然后
滑动窗口滚动条触发事件
weixin_30297281的博客
01-16 353
$(window).on("scroll", function() { if (timer) { clearTimeout(timer); timer = null; } timer = setTimeout(function() { var st = $(window).scrollTop(); $("#imgbox").css('top',st+"px"); //弹...
div+css+js滚动显示信息,marquee不留白滚动
小武的博客
09-19 3349
1. 横向滚动（往左进行滚动显示）：     效果图：           html中内容如下 &lt;table border="0" cellspacing="0" cellpadding="0"&gt; &lt;tbody&gt; &lt;tr&gt; &lt;td id="header_demo1" nowrap="&qu
如何将导航栏始终固定在窗口顶部:
热门推荐
Johnny0991的专栏
06-28 3万+
如何将导航栏始终固定在窗口顶部: 在很多的网站导航栏或者类似于导航栏的一些功能一直能够固定在网页的顶部，就算是下拉滚动条也不会被窗口所遮挡，这样的功能往往非常的使用，下面就简单介绍一下如何实现此种功能。先看一段代码实例: DOCTYPE html> html> head> meta charset="utf-8"> meta name="author" content="http:
页面滚动到一定位置后 元素滑出显示
a314753967的博客
06-11 1万+
元素滑出之前 和之后的位置是不一样的 滑出之前 opacity: 0; 之后为 1&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;Title&lt;/title&gt;     &lt;style&
拖拽滚动条出现固定导航
最新发布
04-02
这个功能可以通过监听滚动事件来实现。当滚动到一定位置时，就让导航条固定在页面顶部。 具体实现步骤如下： 1. 获取需要固定的导航条和滚动条。 2. 监听滚动事件，获取当前滚动的距离。 3. 判断当前滚动距离是否超过了导航条的位置，如果超过了就将导航条固定在页面顶部。 4. 如果没有超过导航条的位置，就将导航条恢复原来的位置。 代码示例： ``` // 获取需要固定的导航条和滚动条 var nav = document.getElementById('nav'); var scrollBar = document.getElementById('scrollBar'); // 监听滚动事件 window.addEventListener('scroll', function() { // 获取当前滚动的距离 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // 判断当前滚动距离是否超过了导航条的位置 if (scrollTop > nav.offsetTop) { // 将导航条固定在页面顶部 nav.style.position = 'fixed'; nav.style.top = '0'; nav.style.left = '0'; } else { // 将导航条恢复原来的位置 nav.style.position = 'static'; } }); ``` 在上面的代码中，我们使用了 `offsetTop` 属性来获取导航条在页面中的位置。同时，我们还使用了 `scrollTop` 属性来获取当前滚动的距离。通过比较这两个值，我们就可以判断出当前是否需要固定导航条了。如果需要固定，就将导航条的 `position` 属性设置为 `fixed`，并将 `top` 和 `left` 属性设置为 `0`。如果不需要固定，就将导航条的 `position` 属性设置为 `static`。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值