解決すべき課題があります。自動サイズ変更とスティッキー (上下) div を作成しています。ここで例を見ることができますhttp://www.sixplus1.com/inventmx/sixplus1_b.html
問題は、ウィンドウを一番下 (div を停止する必要がある場所) にスクロールすると、div が消えることです。マージンの上部の問題が原因だと思うので、解決するためのアイデアが必要です。例を見て、ウィンドウを一番下の行までスクロールしてください。どんな助けでも高く評価されます。
私はこれをできるだけ早く終わらせる必要があります
あなたが助けてくれることを願っています。これがコードです..
注: #content_derecha という名前のコードの div にはクラス sticky があります
<script src="jquery-1.7.1.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
//I make the div with elastic properties
var bottomPosition = $(window).height();
$('#content_derecha').height(bottomPosition); //in this example #content_derecha is the div that has to be elastic and sticky
$(window).resize(function(){
var bottomPositionN = $(window).height();
$('#content_derecha').height(bottomPositionN); //the same div resizing its position when the window is resized
});
//Here starts the evaulation to make the div sticky
var footerFreno = $('.stop').offset().top; // returns the stop on top
var stickyTop = $('.sticky').offset().top; // returns the stop on bottom. I have another div on footer with the class .stop
if (!!$('.sticky').offset()) { //first the code verify if the sticky class exists
//here I have a function to verify if the scroll position is between the values I need
function verificaRango(x, n, m){
if (x >= n && x <= m)
{
return true; }else
{ return false;
}
}
$(window).scroll(function(){ // Here I capture in a variable the position of the scroll
//Here I calculate the bottom of the sticky and auto reize the div
var arribaValor = $('.sticky').offset().top
var altoValor = $('.sticky').height();
var posicionFreno = arribaValor + altoValor;
var windowTop = $(window).scrollTop(); // the position of the scrollbar
var posFreno = footerFreno-altoValor;
var semaforo = verificaRango(windowTop,stickyTop,posFreno); // I store in a variable named "semaforo" the result of the range verification to finally compare it in an if statement...
if (semaforo == true){ // I finally set the position fixed or static according the position nof the div...
$('.sticky').css({ position: 'fixed', top: 0 });
}
else {
$('.sticky').css('position','static');
}
});
}
});
</script>