Question

我正在建立一个可在此处查看的网站：argit.bounde.co.uk

我已经完成了大部分内容，现在我正在努力进行导航。我有三个导航栏（只有一个可见），无论哪个显示，都需要这个方法。如果您调整浏览器的大小以使窗口缩小以显示秒，然后滚动显示的导航是第三个。

我已经让它变得时尚了，但问题是当我点击一个链接时它会跳转到它想要去的地方，然后返回然后滚动它的意思。这是因为我在导航中留下的“href =”＃target“。我试过包含一个”return false“但是如果broswer不支持JS那么导航根本不起作用。

下一个问题是我想要一种让目标“结束”的方法。当前单击链接时，它会滚动到所选链接，并且导航会在通过链接时更新哪个链接“已结束”。当用户在页面上下滚动时我想要这个，但是如果他们点击链接我希望该链接“结束”（以及来自其他导航的相应链接）并且不受通常滚动检查的影响覆盖它。

我在onClick导航中使用的解决方案如下，我知道有插件可以做这种事情，但我想自己编写，这样我就可以更好地理解jQuery了。我不确定我现在使用的解决方案是否合适，如果没有，请告诉我：

function navigation() { 
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1500);
}

我用于滚动检查的解决方案我偶然发现并且位于下方，它通过覆盖上面的等式来实现并且实际上非常简单。还有一个动作可以在滚动时修复导航。

function navCheck() {

var documentHeight = $(document).height();
var windowHeight = $(window).height();
var windowTop = $(window).scrollTop() + 100;

var navTop = $("#scrollanchor").offset().top;
var mobileTop = $("#mobileanchor").offset().top;
var mobileHeight = $("#mobileanchor").height();

var overviewTop = $("#slider").offset().top;
var bioTop = $("#bio").offset().top;
var solutionsTop = $("#solutions").offset().top;
var experianceTop = $("#experiance").offset().top;
var contactTop = $("#contact").offset().top;

if($(window).scrollTop() > navTop) {
   $("#leftfixer").addClass("leftfix");
    } else {
       $("#leftfixer").removeClass("leftfix");
}

if($(window).width() < 1200){
    if(windowTop - 90 > mobileTop + mobileHeight) {
        $("#mobilefix").slideDown();
        } else {
            if(windowTop - 96 <= mobileTop) {
                $("#mobilefix").hide();
            }
        } 
    } else {
        $("#mobilefix").slideUp();
}

$("li").removeClass("over");
$("li.navoverview").addClass("over");


if(windowTop > bioTop) {
    $("li").removeClass("over");
    $("li.navbio").addClass("over");
}

if(windowTop > solutionsTop) {
    $("li").removeClass("over");
    $("li.navsolutions").addClass("over");
}

if(windowTop > experianceTop) {
    $("li").removeClass("over");
    $("li.navexperiance").addClass("over");
}

if(windowTop > contactTop || windowTop > documentHeight - windowHeight) {
    $("li").removeClass("over");
    $("li.navcontact").addClass("over");
}
}

这是我在这里的第一篇文章，所以如果我错过了任何信息我很抱歉！我也寻找类似的帖子，但似乎大多数人在做这种事情时会去插件。谢谢

更新：跳转到主页的页面已修复

Answer 1

通常情况下，如果使用JavaScript滚动页面，则在调用函数后放置return false;。这可以防止页面暂时滚动到锚点。

像

这样的东西

function navigation() { 
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1500);
    return false;
}

页面滚动jQuery导航

1 个答案: