Javascript 如何在引导scrollspy和粘贴中为href锚点设置偏移距离
使用href锚定时navmenu覆盖的div内容。div开头也需要在锚定单击时显示。单击“锚定”时,是否有任何选项可以与菜单保持一定距离 演示:Javascript 如何在引导scrollspy和粘贴中为href锚点设置偏移距离,javascript,jquery,html,css,twitter-bootstrap,Javascript,Jquery,Html,Css,Twitter Bootstrap,使用href锚定时navmenu覆盖的div内容。div开头也需要在锚定单击时显示。单击“锚定”时,是否有任何选项可以与菜单保持一定距离 演示: $(文档).ready(函数(){ $('a[href*=#]:非([href=#])。单击(函数(){ if(location.pathname.replace(/^\/,'')==this.pathname.replace(/^\/,'')和&location.hostname==this.hostname){ var target=$(thi
$(文档).ready(函数(){
$('a[href*=#]:非([href=#])。单击(函数(){
if(location.pathname.replace(/^\/,'')==this.pathname.replace(/^\/,'')和&location.hostname==this.hostname){
var target=$(this.hash);
target=target.length?target:$('[name='+this.hash.slice(1)+']');
if(目标长度){
$('html,body')。设置动画({
scrollTop:target.offset().top
}, 1000);
返回false;
}
}
});
});代码>
正文{
位置:相对位置;
}
.粘贴{
宽度:100%;
}
#第一节{
背景色:#1E88E5;
}
#第2节{
背景色:#673ab7;
}
#第三节{
背景色:#ff9800;
}
#第41节{
背景色:#00bcd4;
}
#第42节{
背景色:#009688;
}
.海关司{
高度:500px;
颜色:#fff;
}
.navbar默认值{
页边距底部:0;
背景色:透明;
边界:无;
}
.navbar-default.affix{
保证金:自动;
右:0;
左:0;
过渡:所有.6s易于输入输出;
}
.navbar-default.affix+容器流体{
/*填充顶部:70px*/
}
-
-
-
-
-
-
第一节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第二节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第三节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第4节子菜单1
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第4节子菜单2
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏!
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
您需要使用:
scrollTop: target.offset().top - 125
坦率地说,-125
是一次尝试和错误。它应该根据导航栏的高度来计算
片段
$(文档).ready(函数(){
$('a[href*=#]:非([href=#])。单击(函数(){
if(location.pathname.replace(/^\/,'')==this.pathname.replace(/^\/,'')和&location.hostname==this.hostname){
var target=$(this.hash);
target=target.length?target:$('[name='+this.hash.slice(1)+']');
if(目标长度){
$('html,body')。设置动画({
scrollTop:target.offset().top-125
}, 1000);
返回false;
}
}
});
});代码>
正文{
位置:相对位置;
}
.粘贴{
宽度:100%;
}
#第一节{
背景色:#1E88E5;
}
#第2节{
背景色:#673ab7;
}
#第三节{
背景色:#ff9800;
}
#第41节{
背景色:#00bcd4;
}
#第42节{
背景色:#009688;
}
.海关司{
高度:500px;
颜色:#fff;
}
.navbar默认值{
页边距底部:0;
背景色:透明;
边界:无;
}
.navbar-default.affix{
保证金:自动;
右:0;
左:0;
过渡:所有.6s易于输入输出;
}
.navbar-default.affix+容器流体{
/*填充顶部:70px*/
}
-
-
-
-
-
-
第一节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
第二节
尝试滚动此部分,并在滚动时查看导航栏!尝试滚动此部分,并在滚动时查看导航栏
尝试滚动此部分,并在滚动时查看导航栏!