自己写的,只测试了ie9+, firefox,chrome

以下js更好

    var fixbar={
init:function(){
"use strict";
// 滚轴 导航位置变化
var that=this;
this._navbar=$("#navbar");
this._navbody=$("#navbody"); this._navbodyTop=this._navbody.offset().top; //导航目标标签 距离页面顶部高度
console.log(this._navbodyTop+"====")
this._navbarH=this._navbar.outerHeight(); //导航高度
this._navbodyH=this._navbarH;// 给内容默认导航的高度 this._navbodyBottom=this._navbodyTop; //内容页的最底端距离页面顶部高度
this._navbodyBottomFix=this._navbodyTop; //内容页的最底端距离页面顶部高度 - 导航的高度
this._navbarTop=0; //导航 距离内容页顶部的高度 this._imgh=[]; //内容页 图片距离页面顶部的高度
// this._lastimg= this._navbody.find("img:last-child");
// if(this._lastimg[0].complete){console.log(1); //ie使用
// this.setH();
// }else{ console.log(0);
// this._lastimg.load(function(){ that.setH();});
$(window).load(function(){ that.setH();});
// this.scrollGoto();
// }
this.linkhref();
$(window).scroll(function() {
that.scrollGoto();
});
},
setH:function(){
//导航定位
this._navbodyH=this._navbody.outerHeight();
this._navbodyBottom=this._navbodyTop+this._navbodyH;
this._navbodyBottomFix=this._navbodyTop+this._navbodyH-this._navbarH;
this._navbarTop=this._navbodyH-this._navbarH-10;
// 导航锚点定位
var that=this;
this._navbody.find("img").each(function(){
that._imgh.push($(this).offset().top-100);
});
this.scrollGoto();
},
scrollGoto:function(){
this._scrollT=$(window).scrollTop();
if(this._scrollT>this._navbodyTop){
//修改导航位置
if(this._scrollT<this._navbodyBottomFix){
this._navbar.addClass("fixed").removeAttr("style");
}else{
this._navbar.removeClass("fixed").css({"margin-top":this._navbarTop+"px"});
}
//修改导航锚点样式
if(this._scrollT<this._navbodyBottom){
var lii=0;
for(var i=0;i<this._imgh.length;i++){
if(this._imgh[i]<this._scrollT){
lii=i;
}else{
break;
}
}
this._navbar.find("li").eq(lii).addClass("on").siblings("li").removeClass("on");
}
}else{
this._navbar.removeClass("fixed").removeAttr("style");
this._navbar.find("li").eq(0).addClass("on").siblings("li").removeClass("on");
}
},
linkhref:function(){
//点击跳转
var that=this;
this._navbar.find("li").click(function(){
// var thisli=$(this);
this._gotoTop=that._navbody.find("img[data-loc="+$(this).attr("data-href")+"]").offset().top;
if(undefined!=this._gotoTop){
// $(window).scrollTop(gotoTop,5000);
$(this).addClass("on").siblings("li").removeClass("on");
$('html,body').animate({scrollTop:this._gotoTop+"px"},500);
}
});
}
} $(function(){
fixbar.init();
})

缺点:1.未封装的方法 2.点击最后一个li导航时,定位到倒数li导航会定位到倒数第二个去

    $(function (){
"use strict";
//左侧导航 start
// 滚轴 导航位置变化
var $navbar=$("#navbar"), $navbody=$("#navbody"); var navbodyTop=$navbody.offset().top; //导航目标标签 距离页面顶部高度
var navbarH=$navbar.outerHeight(); //导航高度
var navbodyH=navbarH;// 给内容默认导航的高度 var navbodyBottom=0; //内容页的最底端距离页面顶部高度
var navbodyBottomFix=0; //内容页的最底端距离页面顶部高度 - 导航的高度
var navbarTop=0; //导航 距离内容页顶部的高度 var imgh=[]; //内容页 图片距离页面顶部的高度
var $lastimg= $navbody.find("img:last-child");
if($lastimg[0].complete){console.log(1); //ie使用
setH();
}else{ console.log(0);
$lastimg.load(function(){setH();});
}
function setH(){ console.log(2);
//导航定位
navbodyH=$navbody.outerHeight();
navbodyBottom=navbodyTop+navbodyH;
navbodyBottomFix=navbodyTop+navbodyH-navbarH;
navbarTop=navbodyH-navbarH-10;
// 导航锚点定位
$navbody.find("img").each(function(){
imgh.push($(this).offset().top-100);
});
scrollGoto();
} $(window).scroll(function() {
scrollGoto();
}); //定义滚动操作
function scrollGoto(){
var scrollT=$(window).scrollTop(); //alert(scrollT);
// console.log(scrollT); //alert(scrollT);
if(scrollT>navbodyTop){ //console.log(navbodyBottomFix);
//修改导航位置
if(scrollT<navbodyBottomFix){
$navbar.addClass("fixed").removeAttr("style");
}else{
$navbar.removeClass("fixed").css({"margin-top":navbarTop+"px"});//.css({});
}
//修改导航锚点样式
if(scrollT<navbodyBottom){
for(var i=0;i<imgh.length;i++){
if(imgh[i]>scrollT){
$navbar.find("li").eq(i-1).addClass("on").siblings("li").removeClass("on");
break;
}
}
}
}else{ //console.log(1);
$navbar.removeClass("fixed").removeAttr("style");
$navbar.find("li").eq(0).addClass("on").siblings("li").removeClass("on");
}
} //点击跳转
$navbar.find("li").click(function(){
var gotoTop=$navbody.find("img[data-loc="+$(this).attr("data-href")+"]").offset().top;
if(undefined!=gotoTop){
// $(window).scrollTop(gotoTop,5000);
$(this).addClass("on").siblings("li").removeClass("on");
$('html,body').animate({scrollTop:gotoTop+"px"},500);
}
});
//左侧导航 end
})
</script>

jquery 滚轴滚动 导航定位和锚点定位的更多相关文章

  1. jquery页面滚动显示浮动菜单栏锚点定位效果

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

  2. 当锚点定位遇上position: fixed

    <!DOCTYPE html><html> <head> <title>当锚点定位遇上position: fixed</title> < ...

  3. 使用 jQuery.Pin 垂直滚动时固定导航

    ZKEACMS的导航默认是不能固定的,随着页面的滚动而滚动,为了有更好的用户体验,当页面往下滚动时,可以将导航固定在顶端,这样方便用户点击. jQuery Pin 借助jQuery的一个插件 jQue ...

  4. 锚点定位,jquery定位到页面指定位置

    jquery锚点定位 $('body,html').animate({scrollTop: $('#ter1').offset().top}, 500);#ter1是你要定位的id对象,500是0.5 ...

  5. 基于jquery的水平滚轴组件,多参数可设置。

    闲来无事,继续封装.此次封装的为水平滚轴组件,可选择滚动的距离大小.闲话不多说,直接上图. 参数说明: vis:4                中间区域可显示的 li 个数 scroll:4     ...

  6. jQuery全屏滚动插件fullPage.js中文帮助文档API

    jQuery全屏滚动插件fullPage.js中文帮助文档API   发现了一个fullPage.js插件,于是百度了一下,还就是这个插件的作用,其实有很多网站都做了全屏滚动的特效,效果也很好看,今天 ...

  7. html锚点定位不准确问题

    问题描述 当顶部固定时,点击锚点,会跳转到锚点以下. <style> #one,#two,#three{ height: 500px; } #top{ position: fixed; h ...

  8. 微信小程序基于scroll-view实现锚点定位

    代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...

  9. jQuery图片无缝滚动JS代码ul/li结构

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. Task Scheduler API Error 80041318

    https://stackoverflow.com/questions/42307917/task-scheduler-api-error-80041318/42462235#42462235 Hi ...

  2. Zabbix3.4安装部署

    Zabbix3.4安装部署 一.系统环境 cat /etc/redhat-release  CentOS Linux release 7.3.1611 (Core)  关闭防火墙及selinux sy ...

  3. QT踩坑记录1-Q_OBJECT编译问题

    QT踩坑记录1-Q_OBJECT编译问题 QTC++Bugs 错误输出 Q_OBJECT 宏错误的地方会编译出现这样的错误, 无法找到.... 由于自己不想再看到这个错误, 此处 复制自 参考连接1, ...

  4. 百度云BaaS体系揭秘,突破共识机制、单机计算和串行处理三大瓶颈

    区块链作为去中心化的技术机制拥有广泛的应用场景与市场潜能.自2017年爆发式增长后,区块链虽然已经进入平稳期,但仍然存在概念混淆.技术性能制约.智能合约制约.共识机制.网络建设等痛点.为了打破行业壁垒 ...

  5. 怎样借助Python爬虫给宝宝起个好名字

    每个人一生中都会遇到一件事情,在事情出现之前不会关心,但是事情一旦来临就发现它极其重要,并且需要在很短的时间内做出重大决定,那就是给自己的新生宝宝起个名字.因为要在孩子出生后两周内起个名字(需要办理出 ...

  6. Error: Can't find Python executable "G:\Python27"

    错误如题,node-gyp官网介绍不够详细,应设置python.exe的具体绝对路径,如下所示: npm config set python G:\Python27\python.exe 转载于:ht ...

  7. ISA Introduction

    介绍一下X86.MIPS.ARM三种指令集: 1. X86指令集 X86指令集是典型的CISC(Complex Instruction Set Computer)指令集. X86指令集外部看起来是CI ...

  8. 2019年 ICPC亚洲区预赛(上海赛区)总结

    首先,我要说,我输了,输给了自己的无知,输给了自己的心态与实力. 上海区域赛,打铁而归,最终还是没有比过自己SLG的朋友.要说什么呢?实力的差距,还是说给自己的失败找借口?不能进入金牌区,为什么铜牌区 ...

  9. 【python】numpy库和matplotlib库学习笔记

    Numpy库 numpy:科学计算包,支持N维数组运算.处理大型矩阵.成熟的广播函数库.矢量运算.线性代数.傅里叶变换.随机数生成,并可与C++/Fortran语言无缝结合.树莓派Python v3默 ...

  10. 还在用迭代器处理集合吗?试试Stream,真香

    前言 上一篇博客一文带你深入了解 Lambda 表达式和方法引用我给大家介绍了 Java8 函数式特性中的 Lambda,这篇文章我将继续讨论 stream 流的用法 声明:本文首发于博客园,作者:后 ...