Javascript 当用户向下滚动时,如何使第一个视图中的向下箭头消失?
我希望当用户向下滚动页面时,向下箭头图标消失。虽然我在stackoverflow的另一个问题上搜索了它,但我找不到解决方案。我编写了jQuery代码。我不确定这是否正确 这是小提琴上的代码 main.jsJavascript 当用户向下滚动时,如何使第一个视图中的向下箭头消失?,javascript,jquery,display,Javascript,Jquery,Display,我希望当用户向下滚动页面时,向下箭头图标消失。虽然我在stackoverflow的另一个问题上搜索了它,但我找不到解决方案。我编写了jQuery代码。我不确定这是否正确 这是小提琴上的代码 main.js $(document).ready(() => { $('#slideshow .slick').slick({ autoplay: true, autoplaySpeed: 2000, dots: true, });
$(document).ready(() => {
$('#slideshow .slick').slick({
autoplay: true,
autoplaySpeed: 2000,
dots: true,
});
});
$(document).ready(() => {
$('#userReview .slick').slick({
autoplayhttps://jsfiddle.net/92mtjzew/#: true,
autoplaySpeed: 8000,
dots: true,
});
});
$(window).scroll(function(){
if($(".box").toggle($(this).scrollTop() === 0) || ($(this).scrollTop() > 0)) {
$('.box').show();
} else {
$('.box').hide();
}
});
index.html
<!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">☰</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>
试试下面的例子
.hidden{display:none!重要;}
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$('.box').removeClass("hidden");
} else {
$('.box').addClass("hidden");
}
});
});
我会努力做到的!
$(document).ready(function(){
var scroll_pos = 0;
$(document).scroll(function() {
scroll_pos = $(this).scrollTop();
if(scroll_pos > 210) {
$('.box').removeClass("hidden");
} else {
$('.box').addClass("hidden");
}
});
});