作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我需要 JQuery 方面的帮助,我相信这可能是显而易见的解决方案,但我不知道如何去做。关于滚动页面上的导航栏,我希望导航栏上的链接之一转到外部页面(而不是页面中的某个部分)。它会这样做,但它会弄乱滚动页面(背景移动到错误的部分等)。我相信我必须更改 refElement 但我不确定..请帮助:( 谢谢
/*=========================================================================
Navbar ScrollSpy
=========================================================================*/
var scrollPos = $(document).scrollTop(),
nav_height = $('#navbar').outerHeight();
$('.navbar li a').each(function () {
var currLink = $(this),
refElement = $(currLink.attr('href'));
if( refElement.size() > 0 ){
if ( ( refElement.position().top - nav_height ) <= scrollPos ) {
$('.navbar li').removeClass('active');
currLink.closest('li').addClass('active');
}else{
currLink.removeClass('active');
}
}
});
});
//Initialize smoothscroll plugin
smoothScroll.init({
updateURL: false
});
----------------------------------------HTML----------------- ---------------
<nav class="navbar navbar-fixed-top">
<div class=container>
<div class=navbar-header>
<button aria-expanded=false class="collapsed navbar-toggle" data-target=#nav-collapse data-toggle=collapse type=button><span class=sr-only>Toggle navigation</span> <span class=icon-bar></span> <span class=icon-bar></span> <span class=icon-bar></span></button>
</div>
<div class="collapse navbar-collapse" id=nav-collapse>
<ul class="nav navbar-nav navbar-right">
<li class=active><a href=#intro data-scroll>Home</a>
<li><a href=#features-3 data-scroll>Marine</a>
<li><a href=#features-4 data-scroll>Industrial</a>
<li><a href=#contact data-scroll>Contact</a>
<li><a href="https://www.example.com" data-target>Careers</a></ul>
</div>
</div>
最佳答案
做了一些更多的挖掘,发现这个片段有效。谢谢
/**
* Scroll Spy via Bootstrap
*/
$('body').scrollspy({target: "#nav_wrapper", offset:50});
/**
* Scroll Spy meet WordPress menu.
*/
// Only fire when not on the homepage
if (window.location.pathname !== "/") {
// Selector for top nav a elements
$('#top_main_nav a').each( function() {
if (this.hash.indexOf('#') === 0) {
// Alert this to an absolute link (pointing to the correct section on the hompage)
this.href = "/" + this.hash;
}
});
}
/**
* Initiate Awesome Smooth Scrolling based on a.href
*/
$('a.smooth-scroll, #top_main_nav a').click( function() {
target = $(this).attr('href');
offset = $(target).offset();
$('body,html').animate({ scrollTop : offset.top }, 700);
event.preventDefault();
});
关于javascript - Scrollspy - 将导航栏页面链接到外部网址时页面困惑,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44292131/
我正在开发一个 voip 调用应用程序。我需要做的是在接到来电时将 Activity 带到前台。我在应用程序中使用 Twilio,并在收到推送消息时开始调用。 问题是我试图在接到任何电话时显示 Act
我是一名优秀的程序员,十分优秀!