js让导航顶部固定（js吸顶导航栏）
本文目录一览：
- 1、js那种左侧有个导航栏，没有碰到顶部，然后页面滚动，当导航栏到页面顶部的时候就固定，这怎么搞的？
- 2、html导航条拉往下拉的时候怎么让他固定在了界面顶部用什么JavaScript完成
- 3、如何让CSS导航固定在页面顶端。
- 4、导航固定在顶部的，要求导航随着页面往下走950像素之后更换logo，js怎么写？
- 5、fullpage.js怎么实现设置顶部固定导航
- 6、如何用JavaScript 实现 iOSwebView里面Html界面导航栏置顶效果
js那种左侧有个导航栏，没有碰到顶部，然后页面滚动，当导航栏到页面顶部的时候就固定，这怎么搞的？
用JS做的，很简单。。。。我可以给你写一个JS代码。你把需求发给我吧。
这是我给别人写的，你可以参考一下，是不是这样的效果：
!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ""
html
head
meta http-equiv="Content-Type" content="text/html; charset=UTF-8"
titlefix/title
style type='text/css'
body{height:6000px;}
*{margin:0px; padding:0px;}
#fix{width:500px; height:200px; margin:1200px 0 0 800px; border:2px solid #eee; text-align:center; line-height:200px; font-size:20px; font-weight:bold; color:#999;}
/style
script type='text/javascript'
window.onload = function (){
var oFix = document.getElementById('fix');
window.onscroll = function (){
if(document.documentElement.scrollTop = 1200){
oFix.style.position = 'absolute';
oFix.style.marginTop = '0px';
oFix.style.top = document.documentElement.scrollTop + 'px';
}else{
oFix.style.marginTop = '1200px';
oFix.style.position = 'relative';
oFix.style.top = 0;
}
}
}
/script
/head
body
div id='fix'显示的内容/div
/body
/html
html导航条拉往下拉的时候怎么让他固定在了界面顶部用什么JavaScript完成
body
div style="background: #999; height: 500px" /div
div id="nav" style="width: 100%; background: #eee"菜单/div
div style="background: #999; height:1900px" /div
script type="text/javascript" src="js/jquery.min.js"/script
script type="text/javascript"
$(function () {
var nav= $('#nav');
nav.attr('otop', dv.offset().top); //存储原来的距离顶部的距离
$(window).scroll(function () {
st = Math.max(document.body.scrollTop || document.documentElement.scrollTop);
if (st = parseInt(nav.attr('otop'))) {
if (nav.css('position') != 'fixed') nav.css({ 'position': 'fixed', top:0});
}else if (nav.css('position') != 'static') nav.css({ 'position': 'static' });
});
});
/script
/body
如何让CSS导航固定在页面顶端。
置顶的优点
1.减少跳出率：如果是从搜寻引擎而来的访客，对我们网站不熟，文章读完、资料找到后，没有个吸引注意力的设计，通常就直接离开了。那么如果浮动导览列恰巧有个访客有兴趣的主题，就有机会留住这位客人了。
2.随时提供导航：不是每个上网的人都很熟悉网站的构造、摆设位置等，那么这个浮动导览列只要项目设计得好，就能让这位迷途羔羊的网路生手有一个很好的重点指引。
3.节省操作：导览列置顶可以省去按「回到顶端」这个按钮，网页可以少安装、执行一个区块，而且「回到顶端」按钮有时会遮住一些文字。
实现方法
导航栏下拉至一定高度后固定在顶部的特效。实现的方法有好多种，这里介绍个最简单易懂的方法。通过jQuery添加移除类来实现
注意：dispaly:fixed；会使元素脱离文档，不占据文档空间。所以页面会有一些跳动，这时可以给相邻元素加上nav所占高度的margin-top或padding-top即可
（1）“导航栏下拉至一定高度后固定在顶部的特效”，也有同学喜欢叫跟随导航什么的。反正就是这个么意思。先直接上代码：
将这个js放到要实现效果的页面里面去，然后我们要修改的是第三行的.nav，“nav“改成你自己页面导航栏的class；第七行的”100“为下拉到100个像素的时候触发特效，可以自行修改至合适的高度。
（2）然后在css文件里面增加这个属性：
这样就差不多完成了。
讲下这个js的意思，判断下拉到一定高度的时候，给导航栏的div插入一个”fixednav“属性，然后给”fixednav“加上固定在顶部的参数。
导航固定在顶部的，要求导航随着页面往下走950像素之后更换logo，js怎么写？
window.onscroll = function() {
var topH = document.documentElement.scrollTop || document.body.scrollTop;//获取距离页面顶部的距离
var ele = document.getElementById("top");//你的导航栏id
if( topH = 80 ) {//当距离顶部超过XXX
//换logo的代码
} else {
//恢复第一个logo的代码
}
}
导航栏的css用定位悬浮即可
fullpage.js怎么实现设置顶部固定导航
使元素固定在网页中，不需要用到JS的，只需要用到CSS样式就可以了。
使用css 中的 position:fixed; fixed是相对于浏览器的定位，设置了这个样式的元素将不会随页面滚动而改变位置，固定在屏幕中。
如 ：
.classname {
position:fixed;
left:0;
top:0;
z-index:9999;
}
如何用JavaScript 实现 iOSwebView里面Html界面导航栏置顶效果
//记录导航条原来在页面上的位置
var naviga_offsetTop = 0;
var naviga_offsetLeft = 0;
//IE7不识别getElementsByClassName，为了兼容自定义一个
function my_getElementsByClassName(class_name) {
var el = [];
//获取所有元素
_el = document.getElementsByTagName('*');
//通过className刷选
for (var i=0; i_el.length; i++ ) {
if (_el[i].className == class_name ) {
el[el.length] = _el[i];
}
}
return el;
}
//导航条，悬停在顶部
function naviga_stay_top(){
var a_navigation_bar = [];
if(document.getElementsByClassName){//Chrome, FF
a_navigation_bar = document.getElementsByClassName("navigation");
} else {//IE
a_navigation_bar = my_getElementsByClassName("navigation");
}
var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
document.title = scrollTop;
//如果向下滚动的距离大于原来导航栏离顶部的距离
//直接将导航栏固定到可视区顶部
if( scrollTop naviga_offsetTop ){
a_navigation_bar[0].style.top = 0 + "px";
} else {
//如果向下滚动的距离小原来导航栏离顶部的距离，则重新计算导航栏的位置
a_navigation_bar[0].style.top = (naviga_offsetTop - scrollTop) + "px";
}
}
//给导航条上四个tab，加上点击事件。
window.onload=function(){
var a_tabs = [];
if( document.getElementsByClassName ){//Chrome, FF
a_tabs = document.getElementsByClassName("tab");
}else{ //IE
a_tabs = my_getElementsByClassName("tab");
}
var a_contents = [];
if( document.getElementsByClassName ){//Chrome, FF
a_contents = document.getElementsByClassName("content");
}else{//IE
a_contents = my_getElementsByClassName("content");
}
//获取offsetLeft，即导航栏离左边框的距离
var a_main_div = [];
if( document.getElementsByClassName ){//Chrome, FF
a_main_div = document.getElementsByClassName("main");
}else{ //IE
a_main_div = my_getElementsByClassName("main");
}
naviga_offsetLeft = a_main_div[0].offsetLeft;
a_tabs[0].onclick=function(){
window.scrollTo(0, a_contents[2].offsetTop);
}
a_tabs[1].onclick=function(){
window.scrollTo(0, a_contents[3].offsetTop);
}
a_tabs[2].onclick=function(){
window.scrollTo(0, a_contents[4].offsetTop);
}
a_tabs[3].onclick=function(){
window.scrollTo(0, a_contents[5].offsetTop);
}
//获取页面上，导航条到顶部的位置
var a_navigation_bar = [];
if(document.getElementsByClassName){//Chrome, FF
a_navigation_bar = document.getElementsByClassName("navigation");
} else {//IE
a_navigation_bar = my_getElementsByClassName("navigation");
}
//获取offsetTop
naviga_offsetTop = a_navigation_bar[0].offsetTop;
a_navigation_bar[0].style.left = naviga_offsetLeft + "px";
//给滚动条以及鼠标加上滚动事件
if( window.attachEvent) //IE
{
window.attachEvent("onmousewheel", naviga_stay_top);
window.attachEvent("onscroll", naviga_stay_top);
document.attachEvent("onmousewheel", naviga_stay_top);
document.attachEvent("onscroll", naviga_stay_top);
} else {//Chrome ,FF
window.addEventListener("mousewheel", naviga_stay_top,false);
window.addEventListener("scroll", naviga_stay_top,false);
document.addEventListener("mousewheel", naviga_stay_top,false);
document.addEventListener("scroll", naviga_stay_top,false);
}
}
