如何修復滾動效果以使按鈕僅在滾動后才顯示？

Question

這是滾動效果的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/

Answer 1

嗨，我只是嘗試如下：

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

如果您還有問題，請告訴我

謝謝

Answer 2

您的按鈕類並非以不透明度0開頭，因此從一開始就可見。 如下編輯CSS：

a.cta.btn {
   position: fixed;
   opacity: 0
   right: 4vw;
   bottom: 4vw;
   z-index: 1;
   background: #3e5132;
   color: white;
   border: 2px solid white;
}

您還可以按照其他答案中的建議使用“ display：none”，以達到相同的效果。 解決方案的區別在於動畫之間。 更改動畫的不透明度可以設置動畫，從而平滑效果，同時更改顯示屬性會立即發生