1.js代码
/**
* Created by EDUASK on 2016/5/20.
*/
$(function(){
//引入id标签;
var navtive=$("#native");
//设置导航标签为置顶;
var offsetTop=navtive.offset().top;
//定义一个监听高度;
var scrollHeight=$(document).scrollTop;
fn(navtive,offsetTop);
//设置监听事件;
$(window).scroll(function(){
fn(navtive,offsetTop);
});
//调用方法;
function fn(navtive,offsetTop){
var scrollHeight=$(document).scrollTop();
if(offsetTop>scrollHeight){
navtive.css("top",offsetTop);
}else{
navtive.css("top",scrollHeight);
}
}
});
2.html代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>监听导航滚动置顶</title>
<!--css样式;-->
<style type="text/css">
/*添加导航条的样式;
*/
#native{
background: blue;
width: 100%;
height: 20px;
color: red;
position: absolute;
top: 100px;
left: 0;
text-align: center;
}
</style>
<script src="jquery.js"></script>
<script type="text/javascript" src="监听导航滚动置顶.js">
</script>
</head>
<body>
<p id="top">ddddd</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<div id="native">欢迎访问我的导航条</div>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<a href="#top">回到顶部</a>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
<p>aaaaaaaaaaaa</p>
</body>
</html>
分享到：
相关推荐
本文实例讲述了jQuery实现的监听导航滚动置顶状态功能。分享给大家供大家参考，具体如下： 1. js代码 /** * Created by EDUASK on 2016/5/20. */ $(function(){ //引入id标签; var navtive=$("#native"); //...
首先，需要明白实现滚动监听导航栏置顶功能需要掌握的关键技术点包括： 1. 使用Vue的`data`函数来定义组件的状态，包括必要的布局参数和布尔型标志。 2. 在`mounted`生命周期钩子中设置初始状态，并添加滚动事件...
这种效果使得用户在滚动页面时，某个div元素（通常包含重要信息或导航）始终保持在视口顶部，提供持续的可见性。这种设计被称为“固定定位”（fixed positioning）或“粘性布局”（sticky layout）。 在HTML中，`...
"导航条置顶 不随滚动条滚动而改变"这一技术，通常被称为“固定顶栏”或者“固定定位导航”，它是现代网页设计中常用的一种增强用户体验的方法。在本文中，我们将深入探讨如何使用JavaScript和jQuery实现这一功能。 ...
jQuery页面滚动置顶导航代码正是解决这个问题的一种技术方案。这个压缩包“jQuery页面滚动置顶导航代码.zip”包含了实现这一功能所需的所有资源，包括HTML、CSS以及JavaScript代码。 首先，我们来理解“页面滚动...
或者是实现自定义的滑动导航栏，当ScrollView向上滚动时隐藏导航栏，向下滚动时显示。 5. **其他滚动相关API**：除了监听器之外，ScrollView还提供了诸如getScrollX()和getScrollY()这样的方法来获取当前的滚动位置...
标题“滚动条平滑滚动置顶&贴壁滚动层”涉及到的是前端开发中的用户体验优化技术，特别是关于网页滚动效果的设计。这种技术常用于创建更流畅、更具吸引力的用户界面，尤其是在移动设备上，使得用户在浏览长页面时有...
这时可以使用JavaScript监听滚动事件，根据滚动位置动态改变导航条的CSS。 7. **过渡和动画效果**： 使用CSS的`transition`属性可以添加平滑的过渡效果，使得导航条在吸附和非吸附状态之间切换更加自然。 8. **...
接下来，我们将结合jQuery的scroll事件监听页面滚动，当滚动到特定位置时，改变导航栏的背景色。jQuery的代码可能会如下所示： ```javascript $(window).scroll(function() { var scrollTop = $(this).scrollTop()...
【jQuery页面滚动导航栏悬浮置顶特效源码】 在网页设计中，导航栏是一个至关重要的元素，它帮助用户轻松地浏览网站的不同部分。当页面内容较长时，传统的固定定位导航栏可能会随着页面滚动而消失，这给用户带来不便...
接下来，我们将使用jQuery来监听滚动事件，并根据滚动位置判断是否应用置顶样式。当用户滚动到导航栏不再可见的位置时，将导航栏的class更改为`.sticky`，使其固定在顶部： ```javascript $(document).ready...
置顶通常用于显示一些固定的头部信息，如广告、分类标签或导航菜单，即使在用户滚动列表时，这些内容始终保持可见。实现这个功能有多种方法： 1. 使用HeaderView：在ListView的Adapter中，可以添加一个或多个View...
总结，"跟随置顶导航条 js例子代码"涉及到的知识点包括HTML结构、CSS样式、jQuery选择器和事件处理、JavaScript的DOM操作以及滚动事件监听。通过学习和实践这些知识点，开发者可以创建更加友好的用户界面，提升网页...
总结：这个示例代码实现了导航栏随滚动条置顶移动的功能，通过CSS设置导航栏的基础样式，再利用JavaScript监听滚动事件并动态调整导航栏的位置。这种方法提高了用户体验，让用户在浏览长页面时可以轻松访问导航。在...
在网页设计和开发中，"导航停靠置顶"是一个重要的功能，它使得网页的导航菜单在用户滚动页面时始终保持在屏幕的顶部，方便用户随时访问。这种设计通常被称为固定定位（Fixed Positioning）或者粘性头部（Sticky ...
当涉及到复杂的网页布局或者长页面滚动时，"jQuery页面滚动置顶导航特效代码" 就显得尤为实用。这个特效使得导航栏在用户滚动页面时始终保持在屏幕顶部，提升用户体验，确保用户始终可以方便地访问各个链接。 ...
2. **事件监听**：jQuery的`.scroll()`方法用于监听滚动事件。当用户滚动页面时，该事件会被触发，从而执行相应的回调函数，实现导航菜单的动态定位。 3. **CSS定位**：为了实现固定在顶部的效果，通常会使用CSS的`...