web-dev-qa-db-fra.com

Div toujours visible lors du défilement

Sur ma page aspx, j'ai deux parties gauche et droite. Je veux montrer toujours le côté gauche (qui est en fait un treeview contenant un div) tout en faisant défiler le côté droit (qui sont le contenu réel de la page). Merci

htmlvisibility
20
M Usman Shafique

Salut, j'ai trouvé la meilleure solution! Comme toujours, JQUERY m'a sauvé la vie !!

Mettez simplement un Div appelé comme vous voulez, j'ai choisi le même dans l'exemple ci-dessous: #scrollingDiv.

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script>
    $().ready(function() {
        var $scrollingDiv = $("#scrollingDiv");

        $(window).scroll(function(){            
            $scrollingDiv
                .stop()
                .animate({"marginTop": ($(window).scrollTop() )}, "slow" );         
        });
    });
</script>

J'ai pris ce code sur un site Web, cela fonctionne et c'est assez facile à comprendre.

19
Despertaweb

Vous devez mettre position: fixed; sur l'élément div. Cela l'ancre dans la fenêtre d'affichage.

17
danbee

Vous devez définir la position du div sur Fixed en CSS. Voir ce lien pour plus d'informations. Vous devrez également définir la position en utilisant le haut et la gauche dans css pour qu'il sache où le corriger!

4
Daniel Casserly

Le problème est que lorsque le bloc se déplace, il attire l'attention et la capacité de se concentrer sur la lecture.

Pour y remédier en utilisant cette fonction.

Ce code est parfait:

(changez "220" et "46px" si nécessaire)

  var $scrollingDiv = $("#scrollingDiv");

$(window).scroll(function(){     
if ($(window).scrollTop()>220)       {
            $scrollingDiv
                .css("position",'fixed' )  
                .css("top",'46px' )           
        } else {
 $scrollingDiv
                .css("position",'' )    
                .css("top",'' )             
        }
        });
3
user3609824

Avance rapide jusqu'en 2020, et il est maintenant possible de le faire avec CSS.

<div style="position: sticky; top: 0;"> Tree view </div>

L'utilisateur npas l'explique très bien :

top est la distance jusqu'au sommet de la fenêtre à laquelle la div doit rester lorsque vous faites défiler. La spécification de top est obligatoire. (…)

Le div collant agira comme un div normal dans tous les sens sauf lorsque vous le faites défiler, il restera en haut du navigateur.

Voici un jsfiddle pour vous donner une idée.

documentation MDN

Pris en charge par tous les navigateurs modernes

0
Grilse