Question

我有一个这样的页面：

----------------------
.header
----------------------


.content
   .hidden-element (fixed right side)


----------------------
.footer
----------------------

我只想在内容部分滚动时显示隐藏的元素。

例如，您开始从标题部分向下滚动。当您进入内容部分时，将显示隐藏的元素。如果再次向下滚动到页脚部分，则隐藏的元素将再次被隐藏。

我该怎么做？

Answer 1

如果我正确理解您的问题，则可以使用窗口提供的偏移量。因此，JavaScript-Scroll Element应该是正确的方法。

首先获取偏移量。

let offsetContent = jQuery('.content').offset().top;
let offsetFooter = jQuery('.footer').offset().footer;

接下来注册具有给定偏移量的滚动侦听器

$(document).scroll(function() {
  let y = $(this).scrollTop();
  if (y > offsetContent && y < offsetFooter) {
    $('.hidden-element').fadeIn();
  } else {
    $('.hidden-element').fadeOut();
  }
});

注意：我建议为元素使用唯一的ID，然后在jQuery上使用纯JavaScript解决方案。

例如，我们得到以下结构：

----------------------
.header #header
----------------------


.content #content
   .hidden-element #hidden-element(fixed right side)


----------------------
.footer #footer
----------------------

然后我们可以像

那样获取偏移量

let offsetContent = document.getElementById('content').offsetTop; 
let offsetFooter = document.getElementById('footer').offsetTop;

之后，我们再次注册处理程序

window.addEventListener('scroll', function() {
    let y = document.documentElement.scrollTop;
    if (y > offsetContent && y < offsetFooter) {
      document.getElementById('hidden-element').classList.add('active');
    } else {
      document.getElementById('hidden-element').classList.remove('active');
    }
});

在那之后，只需添加一个CSS类以进行活动样式

#hidden-element {
 display: none; 
}

#hidden-element.active {
 display: block; 
}

请让我知道这种方法是否适合您。

答案与以下问题有关：

Answer 2

<!DOCTYPE html>
<html>
<head>
    <script src="https://code.jquery.com/jquery-3.3.1.min.js"
            integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
            crossorigin="anonymous"></script>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
    <script>
        $(window).scroll(function () {
            if ($(this).scrollTop() > 300) {

                $('.myDiv').hide(1000);
            }
            else {
                $('.myDiv').show(1000);
            }
        });
    </script>
    <br />
    <div style="height:400px"></div>

    <div class="myDiv">
        <ul>
            <li>Arunachal Pradesh</li>
            <li>Himachal Pradesh</li>
            <li>Uttar Pradesh</li>
            <li>Madhya Pradesh</li>
            <li>Andhra Pradesh</li>
        </ul>
    </div>

    <div style="height:1000px"></div>
</body>
</html>

请检查上面的代码这个示例代码是如此简单2主要功能 $（窗口）.scroll（）正在检测页面的滚动事件 if（$（this）.scrollTop（）> 300）检查大于300时从页面顶部滚动的像素，然后隐藏div或在else条件下显示div。

在自定义div上滚动时显示隐藏的元素

2 个答案: