Question

在我的网站上，我有一个具有相对位置的div，该div具有bottom:0和width: 100%，并且当用户在页面上滚动时，div会更改为固定位置，底部也为0和宽度： 100％（div从具体位置移动到页面底部）。我使用jQuery执行此操作，但无法应用平滑过渡。我该怎么办？我尝试使用.animate（），但无法正常工作。

这是脚本

jQuery(function($){
    $(window).scroll(function(){ 
         let a = 350;
         let pos = $(window).scrollTop();
         if(pos > a) {
             $("#button-presupuesto").addClass('isFixed');
         }else{
             $("#button-presupuesto").removeClass('isFixed');
         }
    });
});

和CSS：

.isFixed{
   width: 100%;
   position: fixed;
   z-index: 999;
   bottom: 0;
}

Answer 1

您应将其位置设置为fixed，并将transition与visibility，opacity配合使用。

jQuery(function($){
    $(window).scroll(function(){ 
         let a = 100;
         let pos = $(window).scrollTop();
         if (pos > a) {
             $(".bottom-bar").addClass('isFixed');
         } else {
             $(".bottom-bar").removeClass('isFixed');
         }
    });
});

body {
	margin: 0;
	font-family: system-ui;
	padding-bottom: 80px; /*Spacing for bottom-bar*/
}
p {
	padding: 0 20px;
}

.bottom-bar {
	background-color: #000a;
	color: #fff;
	text-align: center;
	width: 100%;
	position: fixed;
	z-index: 999;
	bottom: 0;
	padding: 30px 20px;
	opacity: 0;
	visibility: hidden;
	transition: all 500ms ease;
}

.isFixed {
	visibility: visible;
	opacity: 1;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia ultricies sollicitudin. Sed mattis aliquet tempus. Morbi euismod bibendum turpis, ac vulputate lorem egestas et.</p> 

<p>Quisque vitae felis lorem. Nunc luctus orci eu turpis ullamcorper lobortis. Ut sed eros non nunc molestie sollicitudin id sed turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus.
<br/><br/><br/>
Maecenas aliquam urna tellus, suscipit euismod tortor faucibus at. Quisque eget imperdiet purus. Sed rhoncus semper risus, quis suscipit dolor elementum nec. Sed nunc est, molestie ut ullamcorper quis, posuere non felis. Vestibulum in fermentum sem, vitae pulvinar eros.</p>

<p>Nullam enim ligula, faucibus hendrerit nibh ac, facilisis rhoncus nulla. Fusce ac cursus velit, ut molestie purus. Suspendisse vulputate metus nec commodo semper. Vestibulum eu tincidunt ligula.</p>

<p>Cras quis consequat quam, ut faucibus arcu. Donec finibus massa ac ex rutrum dictum. Donec justo orci, faucibus quis enim eu, dictum rhoncus justo. Vivamus ornare ullamcorper dolor. Integer consequat justo pretium, vestibulum mi et, gravida tortor. Etiam vel neque vehicula, volutpat erat sit amet, dictum tellus. Donec luctus tincidunt ipsum quis facilisis. In aliquet sit amet sem eget mattis.</p>

<p>Nam maximus ac neque et pretium. In pulvinar lacus eu erat aliquet faucibus. Nulla aliquam scelerisque lectus non fermentum. Aliquam nec placerat tellus. Vestibulum volutpat elit sapien. Nullam scelerisque tortor a elit imperdiet, eget pellentesque nulla hendrerit. Suspendisse potenti. Nam sit amet dictum est. Praesent ultrices finibus aliquet.</p>

<p>Curabitur tortor enim, dictum varius tincidunt in, varius sit amet lectus. Duis imperdiet dignissim metus, ac placerat sem accumsan eget. Morbi vel vestibulum orci. Etiam vel diam vel lacus ultricies rutrum ut eget metus. Integer in mauris tincidunt, dignissim lectus a, hendrerit est. Nulla tincidunt malesuada diam, vel condimentum nisl varius at.</p>

<p>Sed consequat tortor a dignissim fermentum. Sed dolor augue, commodo id viverra id, dictum sit amet nunc. Vivamus nisi nisi, vehicula in pulvinar sit amet, aliquam at mi. Fusce vitae arcu ut nisi luctus congue. Morbi sit amet rutrum est. Nullam nisi nibh, vulputate ac ex ac, ultricies commodo lacus. Mauris consequat ut sem vitae pulvinar. Phasellus faucibus vestibulum accumsan.</p>


<div class="bottom-bar">
	Hello!
</div>

从位置到固定平稳过渡

1 个答案: