自己写的,只测试了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. opencv-10-图像滤波-噪声添加与均值滤波-含opencv C++ 代码实现

    开始之前 再说上一篇文章中, 我们想按照噪声产生, 然后将降噪的, 但是限于篇幅, 我就放在这一篇里面了, 说起图像的噪声问题就又回到了我们上一章的内容, 把噪声当作信号处理, 实际上数字图像处理实际 ...

  2. 再也不用c刷题了!!——c++刷题必备

    致读者: 博主是一名数据科学与大数据专业大二的学生,真正的一个互联网萌新,写博客一方面是为了记录自己的学习历程,一方面是希望能够帮助到很多和自己一样处于困惑的读者.由于水平有限,博客中难免会有一些错误 ...

  3. Node.js快速创建一个访问html文件的服务器

    var http = require('http'), // 引入需要的模块 fs = require('fs'), //引入文件读取模块 cp = require('child_process'), ...

  4. 新手上路:Laravel-控制器基础

    1.控制器在哪 Controller目录默认存放于app\Htpp\Controllers下,当然,你可以自定义这个目录: Controllers文件夹有一个控制器基类Controller.php,你 ...

  5. mybatis源码学习(一):Mapper的绑定

    在mybatis中,我们可以像下面这样通过声明对应的接口来绑定XML中的mapper,这样可以让我们尽早的发现XML的错误. 定义XML: <?xml version="1.0&quo ...

  6. 【10月新版】Aspose.Pdf 10月新版V17.10发布 | 附下载

    2019独角兽企业重金招聘Python工程师标准>>> Aspose.Pdf for .NET 17.10 更新 功能和改进 核心 概述 类别 PDFNET-38067 支持DICO ...

  7. 题目分享T

    题意:蛐蛐国里现在共有n只蚯蚓(n为正整数).每只蚯蚓拥有长度,我们设第i只蚯蚓的长度为a_i(i=1,2,...,n),并保证所有的长度都是非负整数(即:可 能存在长度为0的蚯蚓).每一秒,神刀手会 ...

  8. Linux权限管理、系统进程管理

    权限管理 linux系统中分为四种角色 u=user 当前用户   g=group 同组用户   o=other 其他用户   a=all 代表所有用户 三种权限 r=read 可读 w=write ...

  9. Redis实现分布式锁(设计模式应用实战)

    笔者看过网络上各种各样使用redis实现分布式锁的代码,要么错误,要么片段化,没有一个完整的例子,借这个周末给大家总结一下redis实现分布式锁的两种机制 自旋锁和排他锁 鉴于实现锁的方式不同,那么这 ...

  10. 【Hadoop离线基础总结】linux的shell编程

    linux的shell编程 基本了解 概述 Shell是一个用C语言编写的程序,通过shell用户可以访问操作系统内核服务,它类似于DOS下的command和后来的cmd.exe.Shell既是一种命 ...