javascript - 当 anchor 击顶部屏幕时添加类

Question

我正在开发一个基于 Bootstrap 的动态单页网站，其中动画的显示取决于滚动的部分。

事实上，我有这个，效果很好，但并没有真正按照我希望的方式运行。此代码将 display:block 类添加到当您将鼠标悬停在适当部分时 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 在部分 anchor 到达顶部屏幕时出现，这样它也可以在移动设备上更精确地工作。

我想出了这个技术:

<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 ，基本上任何具有 .hidden 类的 div.section 子级在父节的顶部到达 View 顶部之前都不会显示，如果达到后我们显示这个隐藏元素。

此外，对于第一个 div.section，我们需要显示其 .hidden 子项，因为它已经在 View 中，而不是显示空白屏幕，直到滚动事件发生被解雇了。

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>