Je sais que c'est un vieux sujet ... mais je avais besoin pour mettre en œuvre quelque chose de cette nature récemment. Voici le code pour accomplir la tâche (gardez à l'esprit que vous devrez peut-être modifier le CSS pour l'afficher à l'endroit approprié pour vos besoins, le mien devait ancrer l'élément en haut de l'écran). En outre, cela dépend de jQuery.
$(document).ready(function() {
// initialize the dock
Dock();
// add the scroll event listener
if (window.addEventListener) {
window.addEventListener('scroll', handleScroll, false);
} else {
window.attachEvent('onscroll', handleScroll);
}
});
function Dock() {
Dock.GetDock = document.getElementById('dockable');
Dock.NewScrollOffset = getScrollOffset();
Dock.DockBottomPos = getDockBottomPos();
Dock.DockTopPos = getDockTopPos();
}
function getScrollOffset() {
var scrollOffset = window.pageYOffset
? window.pageYOffset
: document.documentElement.scrollTop;
return scrollOffset;
}
function getDockBottomPos() {
var dockTopPos = getDockTopPos();
var dockHeight = $('#dockable').height();
return (dockTopPos + dockHeight);
}
function getDockTopPos() {
var dockTopPos = $('#dockable').offset().top;
return dockTopPos;
}
function handleScroll(){
if (window.XMLHttpRequest) {
// determine the distance scrolled from top of the page
Dock.NewScrollOffset = getScrollOffset();
if (Dock.NewScrollOffset >= Dock.DockBottomPos) {
Dock.GetDock.className = "fixed";
return;
}
if (Dock.NewScrollOffset <= Dock.DockTopPos) {
Dock.GetDock.className = "";
}
}
}
css:
#dockable
{
position: relative;
width: inherit;
}
#dockable.fixed
{
position: fixed;
top: 0px;
}
Un exemple d'une station d'accueil serait ...
#dockable div
{
display: inline;
*zoom: 1;
height: 25px;
line-height: 25px;
padding: 5px 10px 5px 10px;
}
<div id="dockable">
<div><a href="#">Menu Item 1</div>
<div><a href="#">Menu Item 2</div>
<div><a href="#">Menu Item 3</div>
</div>
@roman nous pouvons facilement faire ce genre de choses, mais pouvez-vous expliquer encore plus clair ..si possible – kobe
@gov - bien sûr. J'ai un élément div qui a la position: fixe et en bas: 0px; ce qui signifie qu'il est juste fixé au fond. Je souhaite qu'il cesse d'être réparé quand il atteint 80px par le bas (après que je défile vers le bas) et que je revienne à être réparé quand je remonte à nouveau vers le haut. J'espère que c'est mieux expliqué maintenant. – Roman
@roman pouvez-vous s'il vous plaît modifier le code par 101010 symbole ou cntr-k – kobe