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

Question

When a user scrolls down, how can I make the down arrow in the first view disappear?当用户向下滚动时，如何使第一个视图中的向下箭头消失？

0 0

I want to make the down arrow icons disappear when a user scrolls down the page.当用户向下滚动页面时，我想让向下箭头图标消失。 Although I searched it on another question of stackoverflow, I cannot find a solution.虽然我在stackoverflow的另一个问题上搜索了它，但我找不到解决方案。 I made jQuery code.我制作了 jQuery 代码。 I am not sure it is correct or not.我不确定它是否正确。

this is the code on fiddle https://jsfiddle.net/92mtjzew/这是小提琴上的代码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>

Answer 1

I think this is use full for you... after 100px scroll down the arrow icon will disappear.我认为这对您来说是完全可用的...向下滚动 100 像素后，箭头图标将消失。 In the above mention code, you use the scroll on the body.在上面提到的代码中，您使用了身体上的滚动。 you can also add this on full document by changing the class on the scroll function.您还可以通过更改滚动功能上的类将其添加到完整文档中。

 $(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>

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-01-31 17:14:50

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-01-31 17:14:50

解决方案1
0 已采纳 2020-01-31 17:14:50