web-dev-qa-db-fra.com

Correction d'un objet en haut de la fenêtre du navigateur lors du défilement

J'ai récemment vu une nouvelle fonctionnalité intéressante dans le nouveau gmail et dans l'aperçu HTML5 de bing qui corrige l'affichage d'une barre de navigation en haut de la fenêtre du navigateur lors du défilement. La barre peut commencer à 100px en bas de la page, mais lorsque vous faites défiler l'écran et qu'elle atteint le haut de la fenêtre du navigateur, elle y est corrigée jusqu'à ce que vous reveniez au-dessus de l'endroit où elle était positionnée à l'origine.

Ma question est; Comment puis-je faire cet effet ou faire quelque chose de similaire à cet effet?

J'espère que vous pouvez comprendre ma question et ce que j'essaie de décrire.

javascriptjqueryhtmlcss
22
Cosmo Posmo

Si vous souhaitez que l'élément commence plus bas sur la page, puis restez fixé en haut lorsque vous faites défiler l'écran, cela peut être un bon début:

http://jsfiddle.net/cc48t/

21
g_thom

Je sais que ce post est un peu vieux, mais reste très utile .. Je voulais juste ajouter une version de jQuery (un peu plus propre et configurable), mais c'est une version modifiée de la réponse de Andrew D..

Dans ce cas, je n'ai pas deux classes, mais un div positionné par rapport et quand j'atteins un certain point (max_scroll), j'ajoute une classe à l'objet, et cette classe est ce qui la fait flotter.

Ci-dessous, le javascript (tout est fait dans la fonction de document ready)

<script type="text/javascript">
var max_scroll = 400; // this is the scroll position to start positioning the nav in a fixed way
$(document).ready(function(){

        $(window).scroll(function () {
        var navbar = $(".filterbutton");

        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        if(scrollTop > max_scroll && !navbar.is(".filterbuttonFixed")) {
                navbar.addClass("filterbuttonFixed");
                // console.log("go floated");
        }
        else if(scrollTop < max_scroll && navbar.is(".filterbuttonFixed") ) {
                // console.log("return to normal");
                navbar.removeClass("filterbuttonFixed");
        }

}
});

</script>

et ceci est mon div conteneur de barre de navigation

<div id="floatable-nav-bar" class="my-relative-position-class">
    <nav class="page-menu">
        <ul class="scroll-nav">
            <li><a class="selected" href="#first">Section 1</a></li>
            <li><a class="" href="#second">Section 2</a></li>
            <li><a class="" href="#third">Section 3</a></li>
            <li><a class="" href="#fourth">Section 4</a></li>
        </ul>
    </nav>
</div>

et le dernier mais non le moindre, mon style flottant

#floatable-nav-bar.nav_floated {
    position:fixed;
    top:1px;
    left: 0;
    width:100%;
    text-align: center;
    background: #EEE;
    padding: 5px 0;
}

Je sais que ce n’est pas l’exemple le plus simple, mais pour les utilisateurs de jQuery, c’est peut-être une approche plus simple, et je pense qu’il est préférable d’ajouter et de supprimer une classe (du moins c’était pour moi).

18
polloss

Si le navigateur prend en charge "position: fixed", l'exemple suivant est:

<html>
<head>
<style>
html,body {
  margin: 0;
}
#navbar.navbar_fixed {
  position:fixed;
  top:0px;
  width:100%;
  height:100px;
  background-color:#f00;
}
#navbar.navbar_absolute {
  position:absolute;
  top:100px;
  width:100%;
  height:100px;
  background-color:#f00;
}
</style>
<script type="text/javascript">

function window_onload() {
  window.addEventListener("scroll",navbar_reset_top,false);
}

var navbar_top=100;

function navbar_reset_top() {
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
  if(scrollTop>navbar_top&&navbar.className==="navbar_absolute") {
    document.getElementById("navbar").className="navbar_fixed";
  }
  else if(scrollTop<navbar_top&&navbar.className==="navbar_fixed") {
    document.getElementById("navbar").className="navbar_absolute";
  }
}

</script>
</head>
<body onload="javascript:window_onload();">
<div id="navbar" class="navbar_absolute">Navigation Bar</div>
<div style="height:2000px;background-color:#ff0;">Content</div>
</body>
</html>
9
Andrew D.

Utilisation:

#element {
  position: fixed;
  right: 200px;
  top: 200px;
}

"fixed" signifie que l'élément est positionné par rapport à la fenêtre du navigateur.

5
Fasani

En définissant la position de la div sur position:fixed

1
Ahsan Rathod

Vous pouvez faire quelque chose comme ça:

Exemple

css

body {
    height: 3000px;
    top: 0;

}
#image {
    width: 100%;
    background: #444;
    height: 50px;
}
#scroller{
    height:100px;
    background:#ccc;
}
.stuck{
    position:fixed;
    z-index:100;
    width:100%;
    top:0;
}

scénario

$(window).scroll(function() {
                if ($(window).scrollTop() > 50) {
                    $('#scroller').addClass('stuck');
                } else {
                    $('#scroller').removeClass('stuck');
                }

            });

après avoir fait défiler 50 px cela changera le css de scroller.

cela peut être un bon début

0
Nileshd

Plutôt que de définir la longueur du défilement, pourquoi ne pouvons-nous pas définir la position de l'objet? dis une fois qu'il atteint top: 0 puis déclenche le script. De cette façon, l'appareil sera plus convivial.

0
Kunal Sarin