添加类当锚点击顶屏时

Question

我正在开发一个基于 bootstrap 的动态单页网站，根据滚动的部分显示动画。

实际上，我有这个，效果很好，但并不是我希望的那样。当您将鼠标悬停在适当的部分时，此代码将 display:block class 添加到 display:none 的元素：

<script>
 $(function() {
  $('#datpage1').hover(function() {
    // on mousehover, show the hidden div
    $('.helloitsme').css('display', 'block');
  }, function() {
    // on mouseout, hide the div
    $('.helloitsme').css('display', 'none');
  });
});
</script>

这样，当用户滚动并悬停该部分时，一些固定的 div 会出现在显示提示的网站内容上。

这里是其中一个元素的CSS:

.helloitsme {
    display: none;
}
.helloitsme img {
    width: 200px;
    height: auto;
    border-radius: 50%;
    position: fixed;
    top: 100px;
    left: 100px;
}

我对这个解决方案的担忧是它不适用于移动设备，而且动画取决于用户的鼠标悬停。

所以我正在尝试找到一种 jQuery 方法来使 div 在该部分锚点到达顶部屏幕时出现，因此它也可以在移动设备上更精确地工作。

我想到了这个技巧：

<script>
var fl = $("#datpage1").offset().top;
$(window).scroll(function() {
     if(this.scrollTop() > fl) {
       $('.helloitsme').css('display', 'block');
     }, function() {
       // on mouseout, reset the background colour
       $('.helloitsme').css('display', 'none');
    });
});
</script>

但无法让它工作..认为它可能与我正在尝试弄清楚的这种技术语法有关。

如果有人有提示、窍门或其他方法，请随意:) 谢谢！

Answer 1

这是模拟您的问题 JS Fiddle，基本上 div.section 的 children 的 class 中的任何 .hidden 都不会一直显示到 parent 部分的顶部到达视图的顶部，如果达到则显示此隐藏元素。

同样对于第一个 div.section 我们需要显示它的 .hidden children 因为它已经在视图中而不是在触发滚动事件之前显示空白屏幕。

JS:

var $scroll, $top, $id, $sections = $('.section');

// Shows the hidden children of the first section...
//since it's already hit the top of the view
$sections.first().children('.hidden').css({'display':'block'});
$(window).on('scroll', function(){
    $scroll = $(window).scrollTop();
    $sections.each(function(){
        $th = $(this);
        $top = $th.position().top;
        $id = $th.attr('id');

        // If this section's top reached the top of the view..
        // show its hidden children
        if($top < $scroll){
            $th.children('.hidden').css({'display':'block'});
        }      
    });
});

CSS:

.section{
    width:100%;
    height:100vh;
    display:block;
    border-bottom:1px dotted #CCC;
    text-align:center;
    font-size:4em;
    color:white;
}
.section p{
    font-size:18pt;
    font-style:italic;
}
.section img{
    margin:0 auto;
    border:4px white solid;
}
.section .hidden{
    display:none;
}
.orange{ background-color:orange; }
.green{ background-color:#009900; }
.blue{ background-color:navy; }
.red{ background-color:#990000; }

HTML:

<div class="section orange">
    A
    <p class="hidden">I'm hidden until this section hits the top</p>
    <img class="hidden" src="//placehold.it/350x150?text=Image A">
</div>
<div class="section green">
    B
    <p class="hidden">I'm hidden until this section's top hits the top</p>
    <img class="hidden" src="//placehold.it/350x150?text=Image B">
</div>
<div class="section blue">
    C
    <p class="hidden">I'm hidden until this section's top hits the top</p>
    <img class="hidden" src="//placehold.it/350x150?text=Image C">
</div>
<div class="section red">
    D
    <p class="hidden">I'm hidden until this section's top hits the top</p>
    <img class="hidden" src="//placehold.it/350x150?text=Image D">
</div>

添加类当锚点击顶屏时

Adding classes when anchor hits the topscreen

javascript

anchor

jquery

添加 类 当锚点击顶屏时

Adding classes when anchor hits the topscreen

javascript

anchor

jquery

添加类当锚点击顶屏时