Question

我希望你们中的一些人可以帮助我解决这个问题。

我正在创建一个单页网站，其中包含一些jquery。导航栏固定在页面顶部，高度为100px。

到目前为止我使用的jquery包括;

滚动动画，以便在单击导航链接时将用户滚动到页面的相关部分。我没有在这个问题中包含这个jquery代码。
当scrollTop达到650px时，导航栏的高度重新调整为50px，包含行（包括链接）的宽度减少到900px（从1280px）。

你可以从我的JSFiddle或下面的代码中看到这个scrollTop jquery - http://jsfiddle.net/josh_boothman/QvME2/

$(document).ready(function(){

    $(window).scroll(function(){

        var scrollTop = 650;
        if($(window).scrollTop() >= scrollTop){
            $('.row').css({
                width: '900px',
                margin : '0 auto'
            });

            $('#header').css({
                height: '50px'
            });
        }

        if($(window).scrollTop() < scrollTop){
        $('.row, #header').removeAttr('style'); 
        }
    });

}）;

我还想要实现的是：当用户滚动到页面上的各个部分时，导航链接上的：悬停效果会改变，即改变为不同的颜色。

所以我想要的是：

当用户滚动1200px时，导航链接悬停会从蓝色变为红色，例如。

有什么方法可以实现这一目标吗？

提前致谢。约什

Answer 1

使用CSS可以更好地实现：

#header[data-section=start]:hover {
  background-color: lightgreen;
}

#header[data-section=about]:hover {
  background-color: yellow;
}

#header[data-section=last]:hover {
  background-color: lightblue;
}

然后，在您的js上，根据用户在页面中的位置切换data-section属性：

var sections = {
  'start': { start: 0,   end: 400  },
  'about': { start: 400, end: 1000 },
  // ...
  'last':  { start: 1000 },
};

$(window).on("scroll", function() {
  var $window   = $(this);
  var scrollTop = $window.scrollTop();

  var section;
  Object.keys(sections).forEach(function(name) {
    var bounds = sections[name];

    if(bounds.start < scrollTop && (bounds.end > scrollTop || !bounds.end)) {
      section = name;
    }
  });

  $("#header").attr("data-section", section);
});

如果您将属性放在body上（并使用类型为body[data-section=start] #header:hover的选择器），您可以扩展此技术，以便只使用CSS（转换，动画等）。

示例：http://jsbin.com/riwofisa/1/edit（滚动，然后将鼠标悬停在顶部栏上）

为了使您的当前代码适应此格式，您可能希望使用我上面提到的技术，通过更改我发布的脚本的最后一行：

$("#header").attr("data-section", section);

要：

$("body").attr("data-section", section);

然后，在CSS上：

/* Changing the color of hovered links */

body[data-section=start] #header a:hover {
  color: lightgreen;
}

body[data-section=about] #header a:hover {
  color: yellow;
}

body[data-section=last] #header a:hover {
  color: lightblue;
}

/* The changes you previously made via JS */
body[data-section=last] #header {
  height: 50px;
}

body[data-section=last] .row {
  width: 900px;
  margin: 0 auto;
}

当然，根据您的需要调整部分名称/边界后。

示例：http://jsbin.com/riwofisa/2/edit?css,js,output

更改效果：当用户使用jquery滚动#px时悬停

1 个答案: