Question

我在很大程度上完成了编码。

我只需要在div出现时添加延迟，而不是在离开时。此外，我正试图清理它，没有向上或向下滑动，只是一个简单的淡入淡出+单向.delay。

感谢。

var footer = $('#footer'),
    extra = 10; // In case you want to trigger it a bit sooner than exactly at the bottom.

footer.css({ opacity: '0', display: 'block' });

$(window).scroll(function() {
       
   var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
       documentHeight = $(document).height();

    
    console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )
       
        
   if( scrolledLength >= documentHeight ) {
       
       footer
          .addClass('bottom')
          .stop().animate({ bottom: '0', opacity: '1' }, 300);

   }
   else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {           
        footer
           .removeClass('bottom')
           .stop().animate({ bottom: '-100', opacity: '0' }, 300);

   } 
});

body { width: 300px; }

#footer {
    display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: -100px;
    height: 100px;
    width: 100%;
    background: #222;
    color: #fff;
    text-align: center;
}

#footer p { 
    padding: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer">
    <p>Lorem ipsum dolor sit amet</p>
</div> 

Consectetur adipiscing elit. Quisque consectetur venenatis iaculis. Proin tincidunt sem eget metus mollis vestibulum. Proin mattis, libero vitae volutpat luctus, magna purus congue eros, vel ultricies elit mauris a metus. Ut interdum suscipit felis eget varius. Vestibulum sit amet dolor vitae metus vulputate placerat ac ac neque. Suspendisse egestas faucibus velit, sed pretium mauris sollicitudin ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies hendrerit hendrerit. Vestibulum at tortor sem.

Nunc egestas iaculis diam. Nam elementum ante vitae nunc congue sit amet viverra felis auctor. Sed sem velit, tincidunt eget pellentesque et, elementum ac metus. Fusce eu risus metus, ac vehicula dolor. Suspendisse bibendum auctor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat, justo a mollis iaculis, mi diam sagittis nisl, sit amet viverra lorem diam convallis quam. Nam vel elementum libero. Nullam eget dui non massa scelerisque tristique. Suspendisse enim neque, laoreet vel euismod vitae, molestie sit amet nulla. Maecenas tempus facilisis sodales. Integer mattis, tellus sed varius vulputate, risus mi condimentum dolor, eu hendrerit arcu odio vel justo. Nullam id eros non quam iaculis scelerisque eget consectetur eros.

Sed varius, leo tempor laoreet ornare, felis diam ultrices nibh, sed tempor sem magna et libero. Duis sed odio at tortor varius iaculis. Sed elit purus, consequat vitae euismod quis, convallis eget diam. Nunc ornare facilisis ipsum, in mollis orci egestas a. Donec ornare, ipsum vitae varius fermentum, velit augue laoreet massa, ac hendrerit urna erat vitae lacus. Aliquam rhoncus quam non augue tincidunt eget convallis augue elementum. Proin feugiat eleifend gravida. Phasellus diam tellus, pretium sit amet viverra non, laoreet nec mi. Maecenas sed ante tellus, quis lobortis ligula. Curabitur sodales dictum elit, quis sagittis mi consectetur condimentum. Morbi tincidunt metus vel massa bibendum at sagittis lacus dapibus.

Nam dapibus, ante et laoreet imperdiet, sem dui ultrices tortor, id consequat ipsum dolor vel elit. Aenean aliquam mattis accumsan. Aenean a mollis mi. Phasellus diam enim, porta pellentesque placerat eget, blandit vel purus. Quisque placerat, purus nec suscipit pulvinar, lorem mauris fermentum quam, at iaculis purus erat ac mauris. Vivamus pellentesque semper odio, sed condimentum sapien lacinia nec. Aliquam erat volutpat. Maecenas est tortor, volutpat sed tincidunt quis, consequat eget nunc. Aliquam quis ipsum enim. Praesent sed nisi enim. Duis ipsum sem, facilisis at pulvinar et, cursus eget tortor. Nullam mi velit, commodo id varius et, scelerisque eleifend elit. Nam et tellus sit amet lectus commodo pharetra. Nunc dapibus quam eget erat ullamcorper eget venenatis lorem suscipit. Ut dolor ante, suscipit nec vestibulum non, vulputate ut nibh.

Donec non diam neque, nec laoreet massa. Donec ultricies tellus vitae sem luctus id rhoncus erat ultricies. Praesent id libero in ante interdum bibendum. Duis ullamcorper augue in est tincidunt porttitor. Maecenas elementum convallis metus, ac tincidunt augue vulputate malesuada. Maecenas tellus lectus, facilisis et elementum vehicula, imperdiet id neque. Praesent vel ipsum facilisis felis varius pulvinar ut in ante. Duis vel lectus nisl, eu blandit dui. Nunc tortor nisi, congue non viverra sed, interdum hendrerit dui.

Answer 1

jQuery有这种延迟方法https://api.jquery.com/delay/，在你的情况下可以这样使用：

var footer = $('#footer'),
    extra = 10; // In case you want to trigger it a bit sooner than exactly at the bottom.

footer.css({ opacity: '0', display: 'block' });

$(window).scroll(function() {
       
   var scrolledLength = ( $(window).height() + extra ) + $(window).scrollTop(),
       documentHeight = $(document).height();

    
    console.log( 'Scroll length: ' + scrolledLength + ' Document height: ' + documentHeight )
       
        
   if( scrolledLength >= documentHeight ) {
       
       footer
          .stop(true)
          .delay(1000)
          .addClass('bottom')
          .animate({ opacity: '1' }, 300);

   }
   else if ( scrolledLength <= documentHeight && footer.hasClass('bottom') ) {           
        footer
           .stop(true, true)
           .removeClass('bottom')
           .animate({ opacity: '0' }, 300);

   } 
});

body { width: 300px; }

#footer {
    display: none;
    position: fixed;
    left: 0px;
    right: 0px;
    bottom: 0px;
    height: 100px;
    width: 100%;
    background: #222;
    color: #fff;
    text-align: center;
}

#footer p { 
    padding: 10px; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="footer">
    <p>Lorem ipsum dolor sit amet</p>
</div> 

Consectetur adipiscing elit. Quisque consectetur venenatis iaculis. Proin tincidunt sem eget metus mollis vestibulum. Proin mattis, libero vitae volutpat luctus, magna purus congue eros, vel ultricies elit mauris a metus. Ut interdum suscipit felis eget varius. Vestibulum sit amet dolor vitae metus vulputate placerat ac ac neque. Suspendisse egestas faucibus velit, sed pretium mauris sollicitudin ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ultricies hendrerit hendrerit. Vestibulum at tortor sem.

Nunc egestas iaculis diam. Nam elementum ante vitae nunc congue sit amet viverra felis auctor. Sed sem velit, tincidunt eget pellentesque et, elementum ac metus. Fusce eu risus metus, ac vehicula dolor. Suspendisse bibendum auctor ultrices. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum placerat, justo a mollis iaculis, mi diam sagittis nisl, sit amet viverra lorem diam convallis quam. Nam vel elementum libero. Nullam eget dui non massa scelerisque tristique. Suspendisse enim neque, laoreet vel euismod vitae, molestie sit amet nulla. Maecenas tempus facilisis sodales. Integer mattis, tellus sed varius vulputate, risus mi condimentum dolor, eu hendrerit arcu odio vel justo. Nullam id eros non quam iaculis scelerisque eget consectetur eros.

Sed varius, leo tempor laoreet ornare, felis diam ultrices nibh, sed tempor sem magna et libero. Duis sed odio at tortor varius iaculis. Sed elit purus, consequat vitae euismod quis, convallis eget diam. Nunc ornare facilisis ipsum, in mollis orci egestas a. Donec ornare, ipsum vitae varius fermentum, velit augue laoreet massa, ac hendrerit urna erat vitae lacus. Aliquam rhoncus quam non augue tincidunt eget convallis augue elementum. Proin feugiat eleifend gravida. Phasellus diam tellus, pretium sit amet viverra non, laoreet nec mi. Maecenas sed ante tellus, quis lobortis ligula. Curabitur sodales dictum elit, quis sagittis mi consectetur condimentum. Morbi tincidunt metus vel massa bibendum at sagittis lacus dapibus.

Nam dapibus, ante et laoreet imperdiet, sem dui ultrices tortor, id consequat ipsum dolor vel elit. Aenean aliquam mattis accumsan. Aenean a mollis mi. Phasellus diam enim, porta pellentesque placerat eget, blandit vel purus. Quisque placerat, purus nec suscipit pulvinar, lorem mauris fermentum quam, at iaculis purus erat ac mauris. Vivamus pellentesque semper odio, sed condimentum sapien lacinia nec. Aliquam erat volutpat. Maecenas est tortor, volutpat sed tincidunt quis, consequat eget nunc. Aliquam quis ipsum enim. Praesent sed nisi enim. Duis ipsum sem, facilisis at pulvinar et, cursus eget tortor. Nullam mi velit, commodo id varius et, scelerisque eleifend elit. Nam et tellus sit amet lectus commodo pharetra. Nunc dapibus quam eget erat ullamcorper eget venenatis lorem suscipit. Ut dolor ante, suscipit nec vestibulum non, vulputate ut nibh.

Donec non diam neque, nec laoreet massa. Donec ultricies tellus vitae sem luctus id rhoncus erat ultricies. Praesent id libero in ante interdum bibendum. Duis ullamcorper augue in est tincidunt porttitor. Maecenas elementum convallis metus, ac tincidunt augue vulputate malesuada. Maecenas tellus lectus, facilisis et elementum vehicula, imperdiet id neque. Praesent vel ipsum facilisis felis varius pulvinar ut in ante. Duis vel lectus nisl, eu blandit dui. Nunc tortor nisi, congue non viverra sed, interdum hendrerit dui.

当用户滚动到最底部并延迟时，淡入/淡出固定位置div

1 个答案: