网页定位导航特效_技术笔记

qiug 2021-05-04

返回一个对象

0赞 · 0采集
qq_宝慕林8199567 2020-07-17

<script src="http:/libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$(window).scroll(function () {
var top = $(document).scrollTop();
var menu = $("#menu");
var items = $("#content").find(".item");
items.each(function () {
var m = $(this);
var itemTop = m.dffset().top;

var currentId = "";
if(top > itemTop) {
currentId = "#" + m.attr("id");
}else{
return false;
}
});
});
});
</script>

0赞 · 0采集
黑项圈 2020-04-10

防止每次都需要运用Jquery进行查询，
可以使用一个变量直接定义为搜索本身

0赞 · 0采集
黑项圈 2020-03-21

anchor 在网页制作中的超链接的一种

0赞 · 0采集
慕函数1487353 2020-03-16

兼容性测试

0赞 · 0采集

qq_流目青酒 2019-12-13

IE6兼容性

对定位“fixed”不兼容，处理方法：

/* ie6 hack */
* html, * html body{
    background-image: url(about:blank);
    background-attachment: fixed;
}
*html 要设置的类 {
    /*position: fixed;*/
    position: absolute;
    top:expression(((e.document.documentElement.scrollTop)?e:document.body.scrollTop)+ 100 +'px');
}

0赞 · 0采集

Humble678 2019-11-10

网页定位导航设计

截图
0赞 · 0采集
暮雪之寒 2019-10-17

原生js最注重的兼容性的问题，很多兼容性问题都是在原生的js中出现

0赞 · 0采集
暮雪之寒 2019-10-16

网页内导航栏特效：
技术点：

0赞 · 0采集
weixin_慕瓜6242559 2019-10-04

4-5练习

0赞 · 0采集
_我在桥上看风景 2019-06-13

scroll 技术点

截图
0赞 · 2采集
Sandaydi 2019-03-13

特效所需要掌握的技术点

截图
0赞 · 1采集
Sandaydi 2019-03-13

特效分析
导航与滚动条之间的定位关联

截图
0赞 · 0采集
qq_ChenTepic_0 2018-10-22

一步步教你做哦步骤

0赞 · 0采集
柠檬大战薄荷 2018-09-19

position:fixed----固定的定位，导航
display:inline---图片链接

0赞 · 0采集
哈尔波儿 2018-08-22

xxx.href得到的是http:....#item1这样的地址，所以不好和之前的currentId （item1）比较，所以运用split()方法借助"#"分段，把xxx.href拆成数组，然后取数组最后一个元素，就是item1这样的字符串了，方便与currentId比较 JS中没有each用for循环，用for循环时用break跳出循环 Ps1：documentElement 和 body 相关说明： -body 是DOM对象里的body子节点，即 <body> 标签； -documentElement 是整个节点树的根节点root，即<html> 标签；解析：DOM把层次中的每一个对象都称之为节点，就是一个层次结构，你可以理解为一个树形结构，就像我们的目录一样，一个根目录，根目录下有子目录，子目录下还有子目录。以HTML超文本标记语言为例：整个文档的一个根就是,在DOM中可以使用document.documentElement来访问它，它就是整个节点树的根节点。而body是子节点，要访问到body标签，在脚本中应该写：document.body。 Ps2： /*因为兼容性问题，要用如下的方法。使用原生方法，要注意兼容性*/ 1.var top = document.documentElement ? document.documentElement.scrollTop : document.body.scrollTop; 2.IE浏览器对getElementByClassName()方法支持较差，解决方法(粗略，在外面重新写一个方法)： function getByClassName(obj,cls){ var element = document.getElementsByTagName("*"); var result = []; for (var i = 0; i < element.length; i++) { if (element[i].className == cls) { //如果有多个class这是不成立的。 result.push(element[i]); } } return result; } } Ps3：在JavaScript中获取的href是整个地址栏的完整地址，所以需要拆分（以“#”拆分）。

0赞 · 0采集
哈尔波儿 2018-08-22
1. var top = document.documentElement ||document.documentElement.scrollTop : document.body.scrollTop;
2. 因为兼容性问题，要用如上的方法。使用原生方法，要注意兼容性
3. IE浏览器对getElementByClassName()方法支持较差，解决方法(粗略)：
  在外面重新写一个方法 function getByClassName(obj,cls){ var element = document.getElementsByTagName("*")；
  var result = []; for (var i = 0;
  i < element.length; i++) {
  if (element[i].className == cls) {
  result.push(element[i]);
  } } return result; } }
0赞 · 0采集
哈尔波儿 2018-08-22

兼容ie6不支持fixed定位的方法：
*html ,*html body{background-image:url(about:blank);
background-attachnent :fixed; } //防止闪烁
*html #menu{position:absolute;
top:expression(((e=document.documentElement.scrollTop)?e:document.body.scrollTop)+100+"px');

0赞 · 0采集
慕婉清7184882 2018-08-01

滚动的知识点

截图
0赞 · 0采集
慕婉清7184882 2018-08-01

锚点（anchor/ˈæŋ.kɚ/）：是网页制作中超链接的一种，又叫作命名锚记。锚点是一种页面内的超级链接。

0赞 · 1采集
慕码人6137340 2018-07-27

由于这个页面单个导航条图片所占的高比之前的用例大，所以需要-300像素，才能保证导航条可以划到最后一个
itemTop-300

0赞 · 0采集
慕码人6137340 2018-07-27

IE11禁用了缓存，所以导航一开始不能用，把阻止的选项打开，可以搞定

0赞 · 0采集
慕神7088389 2018-06-17

这是一个JQuery的属性选择器的写法格式，这个题目属于下面的第二类
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

截图
0赞 · 0采集
慕函数3336489 2018-06-12

导航特效

0赞 · 0采集
Dong大瓜 2018-06-11

最新版jquery：
属性选择器用法--$("[attribute='value']")
而这里menu.find("[href="+currentId + "]"不适用
本来改成menu.find("[href='currentId' ]"的，但是currentid是变量不能呗引号包住
所以就是menu.find("[href='"+currentId+"']" )
摘

2赞 · 0采集
麓鹿不迷路 2018-06-07

function hasClass( obj , cls ){
    return obj.className.match( new RegExp( "(\\s|^)" + cls + "(\\s|$)" ) );
}
function removeClass(obj , cls){
    if( hasClass(obj , cls) ){
        var reg = new RegExp( "(\\s|^)" + cls + "(\\s|$)" );
        obj.className = obj.className.replace( reg , "" );
    }
}
function addClass( obj , cls ){
    if( !hasClass( obj , cls ) ){
        obj.className += " " + cls;
    }
}

1赞 · 3采集
AtlantisKing 2018-06-03

简洁写法：
ul>li*5>a,+'tab'

0赞 · 0采集
qq_fzjiwillbegy_0 2018-04-18

left: 50%;margin-left: 内容宽度的一半; （可以将内容附在中间主体内容的右边）

0赞 · 1采集
半世烟云落 2018-04-13

0赞 · 0采集
半世烟云落 2018-04-13

定位到当前页面的某一标签

0赞 · 0采集

数据加载中...