Исправлено положение div внутри родительского div, чтобы предотвратить прокрутку дочернего div вниз по странице
Поскольку у меня была такая быстрая и актуальная помощь здесь и сейчас, я подумал, что вернусь с другим запросом.
Мне нравится это: http://jsfiddle.net/Tgm6Y/4624/
var windw = this;
$.fn.followTo = function ( elem ) {
var $this = this,
$window = $(windw),
$bumper = $(elem),
bumperPos = $bumper.offset().top,
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight)
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
$window.resize(function()
{
bumperPos = pos.offset().top;
thisHeight = $this.outerHeight();
setPosition();
});
$window.scroll(setPosition);
setPosition();
};
$('#one').followTo('#two');
как предусмотрено MicronXD.
Я ищу элемент div для прокрутки, пока верхняя его часть не достигнет верхней части экрана, а затем, чтобы он оставался там фиксированным, пока не достигнет верхней части div под ним, в моем случае - нижнего колонтитула документа.
Родительский div не имеет указанной высоты, но определяется содержимым страницы.
Простите, если на этот вопрос ответили где-то еще, но в моих поисках я не смог найти ничего, что подходило бы для того, что мне нужно.
Спасибо заранее,
отметка
Я добавил код, как предложено в jsfiddle Матмарбона ниже, и обернул его в код, приведенный в его комментарии. К сожалению, все, что мне удалось достичь, это то, что дочерний элемент действительно остается фиксированным, и только когда его верхняя часть достигает верхней части экрана, но когда он встречает нижнюю границу, где он должен остановиться, он продолжает работать. и перекрывает это.
Я, очевидно, хотел бы получить дополнительную помощь, но не знаю, что делать, чтобы получить какую-либо. Должен ли я перенаправить вас на страницу, на которой я пытаюсь добиться этого. Это http://piciscan.co.uk/experiment/slide-scanning-service на случай, если это поможет.
Я в растерянности и был бы признателен за дополнительную помощь. Заранее спасибо.
отметка
[EDITED 2013-05-17 10:09:53]
ПРАВО!!! Сортировать его!!! У меня на вышеупомянутой странице есть вкладка навигации, показывающая различные варианты для клиентов для сканирования их слайдов. Это работает на JS и требует
<body onload="init()">
чтобы это работало. Удаление этого кода приводит к тому, что div прокрутки работает как нужно. К сожалению, он удаляет функцию вкладки навигации. Но, несмотря ни на что, я нашел другой способ создания навигации с вкладками, для которого не требуется функция "onload".
Если кому-то интересно, это выглядит так:
Во-первых, JavaScript, расположенный в голове:
<script type="text/javascript">
var previoustab=""
function showMe(cid){
if (document.getElementById){
if (previoustab!="")
document.getElementById(previoustab).style.display="none"
document.getElementById(cid).style.display="block"
previoustab=cid
return false
}
else
return true
}
function loadForm(){
showMe("page1")
}
if (window.addEventListener)
window.addEventListener("load", loadForm, false)
else if (window.attachEvent)
window.attachEvent("onload", loadForm)
else if (document.getElementById)
window.onload=loadForm
</script>
Теперь HTML:
<ul id="tabs">
<li><a href="#firstinfo" onClick="return showMe('page1')" class="selected">
First Info</a></li>
<li><a href="#secondinfo" onClick="return showMe('page2')">
Second Info</a></li>
<li><a href="#thirdinfo" onClick="return showMe('page3')">
Third Info</a></li>
</ul>
<div id="tabwrapper">
<div id="page1" class="content">
<h2>Here's some information</h2>
blah<br>blah<br>blah
</div>
<div id="page2" class="content">
<h2>Here's some more information</h2>
blah<br>blah<br>blah
</div>
<div id="page3" class="content">
<h2>And some MORE information</h2>
blah<br>blah<br>blah
</div>
</div>
Сопровождающий css:
ul#tabs {list-style: none;
margin: 30px 0 0 0;
padding: 0 0 3px 0;}
ul#tabs li {display: inline;}
ul#tabs li a {color: #42454a;
background-color: #dedbde;
border: 0;
padding: 0.3em;}
ul#tabs li a:hover {background-color: #f1f0ee;}
ul#tabs li a.selected {color: #000;
background-color: #f1f0ee;
font-weight: bold;
padding: 0.7em 0.3em 0.38em 0.3em;}
#tabwrapper {border: 0;
padding: 0.5em;
background-color: #f1f0ee;}
.content {display: none;}
И, наконец, JQuery:
<script type="text/javascript">
$(document).ready( function()
{
$("a").click( function()
{
$(".selected").removeClass("selected");
$(this).addClass("selected");
} );
});
</script>
Надеюсь, это поможет кому-то.
2 ответа
Как это ( jsfiddle)?
...
bumperPos = $bumper.offset().top,
startingPos = $this.offset().top,
defaultPosType = $this.css('position'),
thisHeight = $this.outerHeight(),
setPosition = function(){
if ($window.scrollTop() > (bumperPos - thisHeight - startingPos)) {
$this.css({
position: 'absolute',
top: (bumperPos - thisHeight - startingPos)
});
} else if ($window.scrollTop() < (startingPos)) {
$this.css({
position: defaultPosType,
top: startingPos
});
} else {
$this.css({
position: 'fixed',
top: 0
});
}
};
...
...
#zero {
width:100%;
height: 200px;
background-color: yellow;
}
#one {
width:100%;
height: 200px;
background-color: aqua;
}
...
...
<div id="zero">CONTENT ABOVE</div>
...
Вы можете использовать новый (2014) position: sticky; значение, которое сделано именно для этого! Но имейте в виду, что он работает только в FF ≥ 32.0.1 и Safari ≥ 6.1 с position: -webkit-sticky; но почти нет других браузеров.