如何在到达其位置后使元素可见

Question

我想让一个对象在用户转到 HTML 文档中的某个位置时可见

当用户滚动到底部时（或在 URL 栏上键入 'pagename.html#bottom'）底部 <div> 应该可见。如何使用 html、css 和 javascript 编写代码？

这是一个示例页面

<div id="top">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div id="bottom" style="visibility:hidden">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>

Answer 1

像这样使用 window.location.hash

说明

window.location.hash是从url中取出hash值的数据 html#bottom.它只是得到 #bottom.
然后定位id名称为document.querySelector('#bottom')

window.onload = function() {
  document.querySelector("'" + window.location.hash + "'").style.visibility = 'visible';
}

Answer 2

首先，您的 body 应该是可滚动的。

可以通过设置溢出来实现属性

  body {
        overflow: auto;
  }

现在检查元素在视口中是否可见。

你必须使用滚动事件。在 body.

上滚动时会触发滚动事件

    $('body').scroll(function(event) {
            if($('#bottom').offset().top < window.innerHeight) {
                  $('#bottom').css('visibility', 'visible');
            }
    });

Javascript:

   window.addEventListener('scroll', function(e) {
        if(document.getElementById('bottom').offsetTop < window.innerHeight) {
              document.getElementById(bottom).style.visibility = 'visible';
        }
   }

Answer 3

解决方案jquery；

<!DOCTYPE html>
    <html>
    <head>
        <title></title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
        <script>
        $( document ).ready(function() {
            $("#bottom").hide();
            console.log( "ready!" );
        });     
        document.onscroll = function() {
        if(document.documentElement.scrollTop + window.innerHeight == document.documentElement.scrollHeight)
        {
            console.log("scrolled");
            alert("scrolled to bottom");
            $("#bottom").show();
        }

    }
        </script>
    </head>
    <body>
        <div id="top">
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit.
            </P>
        </div>
        <div >
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. I am the last statement before reaching bottom.
            </P>
        </div>



        <div id="bottom">
            <P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. i am in the bottom.
            </P>
        </div>
    </body>
    </html>

如何在到达其位置后使元素可见

How to make an element visible after went to its position

html

javascript

css

visibility