jquery - 如何修复滚动效果以使按钮仅在滚动后出现?
问题描述
这是滚动效果的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>
这是按钮的 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;
}
这是带有示例的页面的 URL。 https://new.driveyourdevelopment.com/services/motivational-speaker-denver/
解决方案
嗨,我刚刚尝试如下:
$(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>
如果您仍有问题,请告诉我
谢谢
推荐阅读
- android - Save API data in Room database in Android
- java - 如何在 Java (Eclipse) 中对角检查二维字符数组中的字符串
- swift - UITableView 重叠一切
- java - appcompat 活动崩溃 API 28
- c# - TPL Dataflow CompletionPropagation 不工作 MaxMessage - 选项不工作
- excel - 如何根据合并单元格中的条件移动多行?
- javascript - Google Charts - 将默认内容与工具提示的自定义 HTML 混合
- python - 文本文件中的整数值不变
- reactjs - 当 onClick 提交时不点击按钮调试器,而是在表单的每个 onChange 中点击它
- tensorflow - 从 tensorflow api 检索所有托管模型