Question

我想在用户滚动到的div中添加一个类，但出于某种原因，无论我写什么，div都不会打开。

我正在使用location.hash ==＆＃34;＆＃34;检查某个字符串是否在url中是否正常，然后滚动到该div。一旦它滚动到那个div我想删除hide类并添加show类（它将显示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");
}

Answer 1

纯CSS解决方案

根据您想要实现的目标，您可以使用CSS :target pseudo-class selector。

某些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>

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

如果您的浏览器处理:target伪类，则在第一个示例中应隐藏p个元素;在第二个中你应该看到第一个p元素应该是可见的，而不是第二个;在第三个中，第二个p元素应该是可见的，但不是第一个。

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供参考。

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，因为我不想显示它们然后删除了'显示'类，然后滚动到正确的位置。

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');
   }
}

向div用户添加类刚刚滚动到

3 个答案:

纯CSS解决方案

用法：

小提琴：