div位置，而頁面滾動

我有兩個左右和左邊的部分，我設置固定的位置，而滾動和滾動即將完成時，我刪除位置並將其設置爲底部零。像flipkart類似的概念在他們的產品詳細信息頁面上。div位置，而頁面滾動

這是我的代碼。的Javascript

$(window).scroll(function() { 
if ($(window).scrollTop() > 10) { 
    $(".fixedSlider").addClass("DivAffix"); 
    $(".fixedSlider").removeClass("DivBottom"); 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 

    $(".fixedSlider").removeClass("DivAffix"); 
    $(".fixedSlider").addClass("DivBottom"); 
    } 
} else { 

} 
});

CSS

.DivAffix{position: fixed;width: 480px;} 
.DivBottom{position: absolute;bottom: 0}  
.fixedSlider { min-height: 516px;}

它的正常工作，但是當我提高分辨率的左側部分不能正常工作。它抽搐並置於底部。

來源

2017-06-15 hardik dongare

與滾動 > 10後，你的代碼將添加/刪除類，然後滾動比 window更高，這在同一時間 > 10你的代碼添加/刪除，然後刪除/每個滾動添加類後

其實..

$(window).scroll(function() { 
    if ($(window).scrollTop() > 10 && $(window).scrollTop() + $(window).height() < $(document).height() - 100) { 
    $(".fixedSlider").addClass("DivAffix").removeClass("DivBottom"); 
    } 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
    $(".fixedSlider").removeClass("DivAffix").addClass("DivBottom"); 
    } 
});

這裏是演示但我改變了對CSS一點點地注意到行動

$(window).scroll(function() { 
 
    if ($(window).scrollTop() > 10 && $(window).scrollTop() + $(window).height() < $(document).height() - 100) { 
 
    $(".fixedSlider").addClass("DivAffix").removeClass("DivBottom"); 
 
    } 
 
    if($(window).scrollTop() + $(window).height() > $(document).height() - 100) { 
 
    $(".fixedSlider").removeClass("DivAffix").addClass("DivBottom"); 
 
    } 
 
});

#content{ 
 
    height : 2000px; 
 
} 
 
.DivAffix{position: fixed;width: 100px ; bottom : 0;} 
 
.DivBottom{position: relative;bottom: 0}  
 
.fixedSlider {min-height: 116px;background : red;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="content">Content</div> 
 
<div class="fixedSlider">fixedSlider</div>

來源

2017-06-15 19:03:12

div位置，而頁面滾動

回答

相關問題