[英]How to Fix Scroll Effect to Make Button Only Appear After I've Scrolled?
Here's the Javascript for the scroll effect 这是滚动效果的Javascript
<script type="text/javascript">
$(document).ready(function() {
$(window).scroll(function() {
if($(this).scrollTop() < 200) {
$(".cta").css({"opacity" : "0"})
}
else {
$(".cta").css({"opacity" : "1"})
}
})
})
</script>
Here's the CSS for the button to make it sticky 这是使按钮变粘的CSS
/* call to action in service pages */
a.cta.btn {
position: fixed;
right: 4vw;
bottom: 4vw;
z-index: 1;
background: #3e5132;
color: white;
border: 2px solid white;
}
a.cta.btn:hover {
background: white;
color: #3e5132 !important;
border: 2px solid #3e5132;
}
Here's the URL of a page with an example. 这是带有示例的页面的URL。 https://new.driveyourdevelopment.com/services/motivational-speaker-denver/ https://new.driveyourdevelopment.com/services/motivational-speaker-denver/
Hi i just tried as below: 嗨,我只是尝试如下:
$(document).ready(function() { $(".cta").css({"opacity" : "0"}) $(window).scroll(function() { if($(this).scrollTop() < 200) { $(".btn").removeClass("cta") } else { $(".btn").addClass("cta") } }) })
body { background: #20262E; padding: 20px; color:#fff; font-family: Helvetica; } span { margin-right:20px; color:#fff; } .btn { display: inline-block; padding: 1.5rem 3rem; border: 1px solid black; margin-bottom: 0; font-size: 21px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; border: .15rem solid #3e5132; /* border-radius: 4px; */ } a.btn { position: fixed; opacity:0; right: 4vw; bottom: 4vw; z-index: 1; background: #3e5132; color: white; border: 2px solid white; opacity:0 !important; } a.cta { opacity:1 !important; -webkit-transition: all ease-in-out .5s; transition: all ease-in-out .5s; -webkit-transition: all ease-in-out .5s; } a.btn:hover { background: white; color: #3e5132 !important; border: 2px solid #3e5132; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="banner-message"> <span>Hello World</span> <span>Hello World</span> <span>Hello World</span> <span>Hello World</span> </div> <a href="#contact" class="btn">Contact Victoria Now</a> <div class="section services" id="section2"> <div class="container"> <div class="heading col-md-12 col-xs-12 services"> <h2>Start Leading Your Business Towards Success</h2> <p></p><p>Are your employees struggling with communication, bad customer service, slow response time, teamwork, or having problems with other people? Yes? That means your employees are having human behavior and communication issues, slowing down the growth of your company. Your company starts to grow when you help your team communicate better with your clients and each other.</p> <p>You help your employees communicate better by teaching them the basics of human behavior and communication. When they understand human behavior and have good communication skills they'll perform at their best.</p> <p>The human element is the number one cause for a company's success or failure. You can have the best resources, tools, procedures, or connections but if your employees don't know how to communicate, your company's in trouble.</p> <p>Helping your team communicate better motivates them to work harder too. They communicate better with your clients but also with each other. Communication skills help build friendships and relationships. If they have good friendships at work, your employees will be more motivated to do a good job and show up to work.</p> <p>To improve your employees' performance and motivate them you need to start thinking about their emotions, problems, aspirations, barriers, and goals. Start getting to know them better. They need more than just a boss or co-worker.</p> <p></p> <h3 class="light hidden-xs">Lead</h3> </div> <!-- heading --> </div> <!-- container --> </div> <div class="section services" id="section2"> <div class="container"> <div class="heading col-md-12 col-xs-12 services"> <h2>Start Leading Your Business Towards Success</h2> <p></p><p>Are your employees struggling with communication, bad customer service, slow response time, teamwork, or having problems with other people? Yes? That means your employees are having human behavior and communication issues, slowing down the growth of your company. Your company starts to grow when you help your team communicate better with your clients and each other.</p> <p>You help your employees communicate better by teaching them the basics of human behavior and communication. When they understand human behavior and have good communication skills they'll perform at their best.</p> <p>The human element is the number one cause for a company's success or failure. You can have the best resources, tools, procedures, or connections but if your employees don't know how to communicate, your company's in trouble.</p> <p>Helping your team communicate better motivates them to work harder too. They communicate better with your clients but also with each other. Communication skills help build friendships and relationships. If they have good friendships at work, your employees will be more motivated to do a good job and show up to work.</p> <p>To improve your employees' performance and motivate them you need to start thinking about their emotions, problems, aspirations, barriers, and goals. Start getting to know them better. They need more than just a boss or co-worker.</p> <p></p> <h3 class="light hidden-xs">Lead</h3> </div> <!-- heading --> </div> <!-- container --> </div>
If you still have issue let me know 如果您还有问题,请告诉我
Thank you 谢谢
Your button class does not start with opacity 0 so it'll be visible from the start. 您的按钮类并非以不透明度0开头,因此从一开始就可见。 Edit your CSS as followed: 如下编辑CSS:
a.cta.btn {
position: fixed;
opacity: 0
right: 4vw;
bottom: 4vw;
z-index: 1;
background: #3e5132;
color: white;
border: 2px solid white;
}
you could also use "display: none" as suggested in other answers which will give the same effect. 您还可以按照其他答案中的建议使用“ display:none”,以达到相同的效果。 The difference in solutions lies between the animation. 解决方案的区别在于动画之间。 Changing opacity can be animated and thus the effect smoothed out, while changing the display attribute happens instantly 更改动画的不透明度可以设置动画,从而平滑效果,同时更改显示属性会立即发生
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.