javascript - 当用户向下滚动时如何使向下箭头消失？

标签 javascript jquery html css

当用户向下滚动时，如何使第一个 View 中的向下箭头消失？

0

我想让向下箭头图标在用户向下滚动页面时消失。虽然我在stackoverflow的另一个问题上搜索过，但没有找到解决方案。我编写了 jQuery 代码。我不确定这是否正确。

这是 fiddle 上的代码 https://jsfiddle.net/92mtjzew/ 

$(document).ready(() => {
    $('#slideshow .slick').slick({
        autoplay: true,
        autoplaySpeed: 2000,
        dots: true,
    });
});

$(document).ready(() => {
    $('#userReview .slick').slick({
        autoplay: true,
        autoplaySpeed: 8000,
        dots: true,
    });
});

$(window).scroll(function(){
    if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
       $('.box').show();
   } else {
       $('.box').hide();
   }
});
  
@media only screen and (max-width: 2000px) {
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(#FBDA61, #FF3CAC);
    overflow-x: hidden;
    color: cornsilk;
}
a {
    text-decoration: none;
}        
h1 {
    font-size: 26pt;
}
button {
    text-transform: uppercase;
    font-weight: bold;
}
html {
    font-family: "helvetica neue", sans-serif;
}

.box {
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: fixed
}
.box span {
    display: fixed;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    transition: all .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: 1;
    animation: animate 2s infinite;
}

.box span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -2;
}
.box span:before {
  content: '';
  color: cornsilk;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #d3d3d3;
  transition: all .3s;
  z-index: -1;
}
.box span:hover {
  color: #fff;
}
.box span:hover:before {
  width: 100%;
}
.box span:nth-child(1) {
    opacity: 0.3;
    z-index: 1;
}
.box span:nth-child(2) {
    opacity: 0.5;
    z-index: 1;
}
.logo h1 {
    margin: 0px
}
.logo img{
    text-align: left;
    float: left;
    padding: 15px 0 0 0;
}
.nav {
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 80px;
    line-height: 70px;
    background-color: black;
}

.menu {
    margin: 0 30px 0 0;
}
.menu a {
    clear: right;
    text-decoration: none;
    color: cornsilk;
    margin: 0 10px;
    line-height: 70px;
}

span {
    color: #54D17A;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    display: none;
    float: right;
    color: cornsilk;
}
#toggle {
    display: none;
}
#slideshow {
    position: relative;
    top: 0px;
    left: 0px;
}
#slideshow {
    div {
            width: 100%;
            height: 300px;
    img {
            width: 100%;
            height: auto;
        }
    }
}
 <!DOCTYPE html>
 <html lang="en">
 <head>
    <meta charset="UTF-8">
    <title>Tutorial</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/font-awesome.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
 </head>
 <body>
   <div id="header">
    <div class="logo">
    <h1><img src="img/logo.png" widht="473px" height="50px"></h1>
    </div>
    <div class="nav">
        <label for="toggle">&#9776;</label>
        <input type="checkbox" id="toggle" />
        <div class="menu">
            <a href="http://joeynamiki.com/" target="_blank">Work</a>
            <a href="about.php">About Us</a>
            <a href="#">Services</a>
            <a href="https://medium.com/@wcgwd1" target="_blank">Blog</a>
            <a href="contact.php"><span>Contact Us</span></a>
        </div>
    </div>
    </div><!-- /#header -->
  
    <section id="slideshow">
        <div class="slick">
            <div><img src="img/image1.jpg" width="1274px" height="640px" alt=""></div>
            <div><img src="img/image2.jpg" width="1274px" height="640px" alt=""></div>
            <div><img src="img/image3.jpg" width="1274px" height="640px" alt=""></div>
        </div>
    </section>
  
    <div class="box">
        <span onclick="scrollDown()"></span>
        <span onclick="scrollDown()"></span>
        <span onclick="scrollDown()"></span>
    </div>
    
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script src="js/main.js"></script>
<script>
function scrollDown(){
    var businessPage = document.getElementById("businessPage");
    businessPage.scrollIntoView();
}
</script>
</body>
</html>

最佳答案

我认为这对你来说很有用...向下滚动 100px 后，箭头图标将消失。 在上面提到的代码中，您使用了 body 上的滚动条。您还可以通过更改滚动函数的类来将其添加到完整文档中。

$(document).ready(() => {
    $('#slideshow .slick').slick({
        autoplay: true,
        autoplaySpeed: 2000,
        dots: true,
    });
});

$(document).ready(() => {
    $('#userReview .slick').slick({
        autoplay: true,
        autoplaySpeed: 8000,
        dots: true,
    });
});

// $(window).scroll(function(){
//     if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
//        $('.box').show();
//    } else {
//        $('.box').hide();
//    }
// });

// scroll selector
$('body').scroll(function() {

    // scroll disatance
    if($(this).scrollTop() >= 100){

        $('.box').hide();

    }
    else
    {
    
        $('.box').show();
    
    }    

});
@media only screen and (max-width: 2000px) {
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    background: linear-gradient(#FBDA61, #FF3CAC);
    overflow-x: hidden;
    color: cornsilk;
}
a {
    text-decoration: none;
}        
h1 {
    font-size: 26pt;
}
button {
    text-transform: uppercase;
    font-weight: bold;
}
html {
    font-family: "helvetica neue", sans-serif;
}

.box {
    position: absolute;
    top: 94%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    display: fixed
}
.box span {
    display: fixed;
    width: 20px;
    height: 20px;
    border-bottom: 3px solid white;
    border-right: 3px solid white;
    transform: rotate(45deg);
    margin: -10px;
    transition: all .3s;
    position: absolute;
    top: 50%;
    left: 50%;
    overflow: hidden;
    z-index: 1;
    animation: animate 2s infinite;
}

.box span:after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: white;
  z-index: -2;
}
.box span:before {
  content: '';
  color: cornsilk;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 100%;
  background-color: #d3d3d3;
  transition: all .3s;
  z-index: -1;
}
.box span:hover {
  color: #fff;
}
.box span:hover:before {
  width: 100%;
}
.box span:nth-child(1) {
    opacity: 0.3;
    z-index: 1;
}
.box span:nth-child(2) {
    opacity: 0.5;
    z-index: 1;
}
.logo h1 {
    margin: 0px
}
.logo img{
    text-align: left;
    float: left;
    padding: 15px 0 0 0;
}
.nav {
    border-bottom: 1px solid #EAEAEB;
    text-align: right;
    height: 80px;
    line-height: 70px;
    background-color: black;
}

.menu {
    margin: 0 30px 0 0;
}
.menu a {
    clear: right;
    text-decoration: none;
    color: cornsilk;
    margin: 0 10px;
    line-height: 70px;
}

span {
    color: #54D17A;
}

label {
    margin: 0 40px 0 0;
    font-size: 26px;
    display: none;
    float: right;
    color: cornsilk;
}
#toggle {
    display: none;
}
#slideshow {
    position: relative;
    top: 0px;
    left: 0px;
}
#slideshow {
    div {
            width: 100%;
            height: 300px;
    img {
            width: 100%;
            height: auto;
        }
    }
}
<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Tutorial</title>
   <!-- <link rel="stylesheet" type="text/css" href="css/style.css"> -->
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- <link rel="stylesheet" href="css/font-awesome.min.css"> -->
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.css">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick-theme.min.css">
<!-- <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> -->
<link rel="stylesheet" href="css.css">
</head>
<body>
  <div id="header">
   <div class="logo">
   <!-- <h1><img src="img/logo.png" widht="473px" height="50px"></h1> -->
   </div>
   <div class="nav">
       <label for="toggle">&#9776;</label>
       <input type="checkbox" id="toggle" />
       <div class="menu">
           <a href="http://joeynamiki.com/" target="_blank">Work</a>
           <a href="about.php">About Us</a>
           <a href="#">Services</a>
           <a href="https://medium.com/@wcgwd1" target="_blank">Blog</a>
           <a href="contact.php"><span>Contact Us</span></a>
       </div>
   </div>
   </div><!-- /#header -->
 
   <section id="slideshow">
       <div class="slick">
           <div>
             <img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
            </div>
           <div>
             <img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
            </div>
           <div>
             <img src="https://images.unsplash.com/photo-1558981420-bf351ce8e3ca?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" width="1274px" height="640px" alt="">
            </div>
       </div>
   </section>
 
   <div class="box">
       <span onclick="scrollDown()"></span>
       <span onclick="scrollDown()"></span>
       <span onclick="scrollDown()"></span>
   </div>
   
   <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<!-- <!-- <script src="js/main.js"></script> --> -->
<script>
// function scrollDown(){
//    var businessPage = document.getElementById("businessPage");
//    businessPage.scrollIntoView();
// }
</script>
<script src="main.js"></script>
</body>
</html>

关于javascript - 当用户向下滚动时如何使向下箭头消失？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/60007268/

上一篇：javascript - 我可以移动两个文件夹的文件吗？ Dropzone.js

下一篇：javascript - 如何将开头为零的整数(如 00111 )转换为等效的字符串 '00111' ？

相关文章：

javascript - 如何使用 Canvas 将 div 渲染的 .png 逆时针旋转 90°？

javascript - Extjs日历面板

javascript - 如何在 Javascript 中从指向它的变量获取对象名称

jquery - 第一次点击时跳转动画，第二次点击时正常

jquery - Hello Bar-like 代码

javascript - chart.js 中条形图中的交替条未标记

javascript - 如何使用 html/jQuery UI 正确显示弹出对话框

html - svg中齿轮逆时针旋转

javascript - 离开编辑后的 ​​html 表单前提示确认

javascript - JavaScript/jQuery/AJAX 中的嵌套模板

©2024 IT工具网  联系我们