将 window.location 添加到正文类答案

【问题标题】：Add window.location to body class将 window.location 添加到正文类
【发布时间】：2016-11-17 03:41:50
【问题描述】：

我正在尝试组合一个平滑的滚动导航，当您滚动包含菜单的整个标题时，它会更改背景颜色以匹配该部分的定义颜色。我正在为我的导航使用带有 magellan 功能的 Foundation 6。

我正在尝试让我的 JS 获取当前 URL 并向作为当前 URL 的正文添加一个类。

var current_location = window.location.href.split('/');
var page = current_location[current_location.length - 1];

这会获取我的 URL 哈希（即：#section2、#section3）。我需要注意它在页面滚动时的变化，并将它们添加到正文类，同时在您离开该部分后删除前一个。

【问题讨论】：

您可以使用window.location.hash 获取网址哈希。但是为什么当你滚动时哈希会发生变化，有什么办法吗？然后你可以为hashchange事件添加一个监听器。\

标签： jquery smooth-scrolling window.location

【解决方案1】：

假设您有一些机制/小部件可以在您滚动页面时更改hash 并且按照@Barmar 的建议，您可以尝试以下代码：

var oldHashValue = ""; //defining the global variable to store old hash value class

$(function() {
  // Bind an event to window.onhashchange that, when the hash changes, gets the
  // hash and adds it as a class to <body> tag.

  $(window).on('hashchange', function() {
    var hash = location.hash;

    //remove the previously added class from <body> only if its not a blank string
    if($.trim(oldHashValue).length > 0)
    {
        $("body").removeClass(oldHashValue);
    }

    oldHashValue = hash.replace( /^#/, "" ); //set the variable value
    if($.trim(oldHashValue).length > 0)
    {
        //add the class to body element
        $("body").addClass(oldHashValue);
    }
  });
  // Since the event is only triggered when the hash changes, we need to trigger
  // the event now, to handle the hash the page may have loaded with.
  $(window).trigger("hashchange");
});

【讨论】：

所以当我添加这个时，我会在我的控制台中得到“$(...).hashchange 不是一个函数”...。我已经包装了我的 document.ready();
哦..我错过了那个。您现在可以检查更新的代码吗？
这一行似乎出错了： $( window ).hashchange(); “$(...).hashchange 不是函数”...谢谢您的帮助，非常感谢
@Danny - 你能把那行换成$(window).on('hashchange', function() {
或更好的方法；用我刚刚修改的更新代码替换您的代码。

【解决方案2】：

换了一种方法，想发在这里供参考：

$(document).scroll(function () {

    var headerHeight = $('#header').height() + $('.bottom-header').height() - 4;

    var x = $(this).scrollTop(),
        section1 = $('#section1'),
        section2 = $('#section2'),
        section3 = $('#section3'),
        section4 = $('#section4');
        section5 = $('#section51-a');


    if (x >= section1.offset().top && x < (section1.offset().top + section1.height())) {
        $('.top-header').css("background-color", "#cc00cc");
    }


    if (x >= (section2.offset().top - headerHeight) && x < (section2.offset().top + section2.height())) {
        $('.top-header').css("background-color", "#009999");
    }
    if (x >= (section3.offset().top - headerHeight) && x < (section3.offset().top + section3.height())) {

        $('.top-header').css("background-color", "#ea148c");
    }
    if (x >= (section4.offset().top - headerHeight) && x < (section4.offset().top + section4.height())) {
        $('.top-header').css("background-color", "#999900");
    }
    if (x >= (section5.offset().top - headerHeight) && x < (section5.offset().top + section5.height())) {
        $('.top-header').css("background-color", "#0066cc");
    }


});

【讨论】：