2

我正在建立一个可以在这里查看的网站：argit.bounde.co.uk

我已经完成了大部分内容，现在我正在尝试进行导航。我有三个导航栏（只有一个是可见的）并且无论显示哪个都需要这种方法。如果您调整浏览器的大小以使窗口变窄将显示第二个，然后当您滚动时出现的导航是第三个。

我已经让它以一种时尚的方式工作，但问题是当我单击一个链接时，它会立即跳转到它想要去的地方，然后返回，然后按预期滚动。这是因为我在导航中留下了“href="#target"。我尝试过包含“return false”，但是如果浏览器不支持 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");
}
}

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

更新：页面跳转到锚点已修复

4

1 回答 1

2

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

就像是

function navigation() { 
    $('html, body').stop().animate({
        scrollTop: $($(this).attr('href')).offset().top
    }, 1500);
    return false;
}
于 2013-04-08T23:02:50.163 回答