首页 文章

从相对于固定的位置平滑过渡

提问于
浏览 次
1

在我的网站上我有一个相对位置的div，这个div有 bottom:0 和 width: 100% 当用户在页面上滚动时div会变为固定位置，同时底部0和宽度：100％（div从具体位置移动到页面底部） . 我用jQuery做这个，但我可以't apply a smooth transition. How could I do this? I tried with .animate() but doesn'工作 .

这是脚本

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;
}
jquery css

1 回答

  • 0

    您应将其位置设置为 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.



    
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>
    回复于

相关问题