垂直菜单的平滑滚动链接效果问题 [英] Smooth scrolling link effect issue with vertical menu
问题描述
我正在尝试解决此模板上的问题: https://codepen.io/eksch/pen/xwdOeK
I'm trying to fix a problem on this template: https://codepen.io/eksch/pen/xwdOeK
如果我将窗口调整为全屏大小,则导航菜单上的突出显示效果仅在减小的浏览器高度上起作用(
The highlighting effect on the navigation menu only works on a reduced browser height, if I resize the window to full screen (https://codepen.io/eksch/full/xwdOeK) and scroll down to section 7, the link on the navigation menu will not be highlighted. (I'm viewing from a 27 in imac)
在javascript中,我相信此功能控制着链接的突出显示: $(window).scroll(function(){ var scrollDistance = $(window).scrollTop();
In the javascripts, I believe this funciton controls the link highlight: $(window).scroll(function() { var scrollDistance = $(window).scrollTop();
// Show/hide menu on scroll
//if (scrollDistance >= 850) {
// $('nav').fadeIn("fast");
//} else {
// $('nav').fadeOut("fast");
//}
// Assign active class to nav links while scolling
$('.page-section').each(function(i) {
if ($(this).position().top <= scrollDistance) {
$('.navigation a.active').removeClass('active');
$('.navigation a').eq(i).addClass('active');
}
});
}).scroll();
有没有一种方法可以更改代码以适应所有屏幕尺寸?我应该如何使该部分与Bootstrap交互?
Is there a way that I change the code to adapt to all screen size? And how should I make the section interactive with bootstrap?
我对前端开发还是陌生的,请寻求任何帮助!
I'm stil new to front-end development, appriciate for any help!
推荐答案
修复您的if语句:
if ($(this).position().top - $(this).height() <= scrollDistance)
这篇关于垂直菜单的平滑滚动链接效果问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!