将类添加到用户刚滚动到的 div。

Question

我希望在用户滚动到一个div之后添加一个class，但不知道为什么无论我写什么，div都不会打开。

我使用location.hash == ""来检查url中是否有特定字符串，并滚动到该div。一旦它滚动到那个div，我想删除hide class 并添加 show class（这将显示div），但我无法使其正常工作。

这可能非常简单，但我无法达到正确的效果。

以下是我的代码：

if(window.location.hash == 'data-sheets') {
    $.scrollTo('.Data-Sheets', 0, { offset:-1 } , { easing:'elasout' }); 
    $(".Data-Sheets .expand2").removeClass("hide");
    $(".Data-Sheets .expand2").addClass("show");
}

- fnk

---

根据类的组成，您可以调用.hide() / .show()而不是应用类（与Q没有直接关系）。 - SW4

.hide只是隐藏div，而.show将显示div。我默认将.hide应用于所有div，因为我不希望在页面加载时显示它们。当用户滚动到特定的div时，它们应该显示。 - fnk

Answer 1

纯CSS解决方案

根据您想要实现的效果，您可以利用CSS的:target伪类选择器。

一些URI指向资源内的位置。这种URI以“数字符号”（#）结尾，后跟锚点标识符（称为片段标识符）。

带有片段标识符的URI链接到文档中的某个元素，称为目标元素。例如，这是一个指向HTML文档中名为section_2的锚点的URI：

http://example.com/html/top.html#section_2

目标元素可以由:target伪类表示。如果文档的URI没有片段标识符，则文档没有目标元素。

例如：

.Data-Sheets .expand2 {
  display: none;
}

.Data-Sheets .expand2:target {
  display: block;
}

这是一个JSBin演示，展示以下标记的使用：

<div class="Data-Sheets">
  <p class="expand2" id="foo">I should be visible when #foo is added to the URL.</p>
  <p class="expand2" id="bar">I should be visible when #bar is added to the URL.</p>
</div>

1. 未指定目标：http://jsbin.com/qowurijavi/1
2. 指定了 #foo：http://jsbin.com/qowurijavi/1/#foo
3. 指定了 #bar：http://jsbin.com/qowurijavi/1/#bar

如果您的浏览器支持 :target 伪类，那么在第一个示例中，两个 p 元素都应该被隐藏；在第二个示例中，您应该看到第一个 p 元素可见，但不是第二个；在第三个示例中，第二个 p 元素应该可见，但不是第一个。

- James Donnelly

---

我尝试了你的解决方案，@JamesDonnelly，但没有起作用。抱歉。 - fnk

我按照你的建议添加了CSS，并确保我的div具有正确的类/ID，但当我滚动到该div时它并没有打开。你的建议很好，我看了你的链接，它确实有效。也许我在代码中漏掉了什么。不过我更喜欢使用JS方法。 - fnk

Answer 2

你可以这样做：

function scrollToDiv(id) {
    var id = $("#"+id);
    if( id.position().top + $(window).height() - $(window).scrollTop() > 0 )
        id.addClass("focus");
    else
        id.removeClass("focus");     
}

使用方法：

$(window).scroll(function() {
    scrollToDiv("mydiv");
});

JSFiddle:

这里有一个可以参考的工作 JSFiddle。

- Marventus

Answer 3

我发帖是想帮助其他和我一样尝试实现同样功能的人。

我没有意识到在我的if语句中缺少了哈希符号，添加后解决了我的问题，类被正确地添加/删除了。

这是我的最终代码:

if(window.location.hash == '#data-sheets') {
    $.scrollTo('.Data-Sheets', 0, { offset:-1 } , { easing:'elasout' });
    $('.Data-Sheets .expand2').removeClass('hide');
    $('.Data-Sheets .expand2').addClass('show');    
return false;
} 

我还添加了这个函数来检查哈希是否已更改，因为我需要在不同的链接之间切换，它默认情况下“隐藏”所有div，因为我不想显示它们，然后删除“show”类，然后滚动到正确的位置。

function locationHashChanged() {

   if(location.hash == '#data-sheets') {
       $.scrollTo('.Data-Sheets', 0, { offset:-1 } , { easing:'elasout' });
       $('.expand2.show').addClass('hide');
       $('.expand2.show').removeClass('show');
       $('.Data-Sheets .expand2').addClass('show');
   }
}

- fnk