jQuery导航条固定定位效果实例代码
更新时间：2017年05月26日 11:38:31 作者：被时光移动的城
本篇文章主要介绍了jQuery导航条固定定位效果实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
实现效果图：
向下滑动时，导航栏固定
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
img{
display: block;
margin: 0 auto;
}
img#search.dhgd{
position: fixed;
left: 50%;
margin-left: -596px;
top: 0px;
}
</style>
<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function(){
// 给浏览器加滚动条事件
$(window).scroll(function(){
//获得当前已滚动上去的距离
var t = $(document).scrollTop();
console.log('=================='+t)
if(t>126){
$("#search").addClass('dhgd');
}else{
$("#search").removeClass('dhgd');
}
})
})
</script>
</head>
<body style="background: #F1F1F1;">
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
这篇文章主要介绍了使用jquery做的一个简单的屏幕锁定提示框,需要的朋友可以参考下2014-03-03
这篇文章主要介绍了jQuery调用Webservice传递json数组的方法,实例分析了jQuery基于ajax与Webservice传递json数据的相关实现技巧,需要的朋友可以参考下2016-08-08
现在我们经常会用到一些地图应用，无论是在网页上还是手机App中，地图貌似是一个不可或缺的应用。本文将带领大家一起来看看jQuery和HTML5的个性化地图插件，都是比较实用的，感兴趣的朋友一起学习吧2015-11-11
现在文件的上传，特别是大文件上传，都需要进度条。这篇文章主要介绍了servlet+jquery实现文件上传进度条示例代码，有兴趣的可以了解一下。2017-01-01
这篇文章主要为大家详细介绍了基于jQuery实现弹幕APP的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-02-02
jquery实现Slide Out Navigation滑出式菜单效果代码
这篇文章主要介绍了jquery实现Slide Out Navigation滑出式菜单效果代码,涉及jquery基于鼠标事件操作页面元素动态变换的技巧,需要的朋友可以参考下2015-09-09
这篇文章主要为大家详细 介绍了chosen实现省市区三级联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-08-08
jquery中的$(document).ready()与window.onload的区别
浏览器执行window.onload函数不仅仅是在构建完DOM树之后, 也是在所有图像和其他外部资源完整的加载并且在浏览器窗口显示完毕之后.2009-11-11
这篇文章主要介绍了如何利用JQuery+CSS模拟淘宝实现侧边导航栏以及滑动电梯效果，文中的示例代码讲解详细，感兴趣的小伙伴可以动手试一试2022-03-03
jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法
这篇文章主要介绍了jQuery插件Easyui设置datagrid的pageNumber导致两次请求问题的解决方法,较为详细的描述了出现的问题、问题的原因及相应的解决方法,需要的朋友可以参考下2016-08-08
最新评论