web-dev-qa-db-fra.com

Comment créer une zone de contenu défilant

J'ai fait des expériences sur un site sur lequel je travaille. Mon client souhaite conserver l’en-tête avec son logo et son logo, afin que les visiteurs puissent toujours accéder à la barre de navigation tout en faisant défiler pour lire le contenu de la page. J'ai ajouté fixed à mon wrapper div et qui garde l'arrière-plan statique, mais dans cette conception, l'arrière-plan fait également partie de l'en-tête.

Ma page est http://axiomwest.com/client-services/

Comment puis-je obtenir une zone d'en-tête fixe et autoriser le défilement uniquement dans la zone de contenu principale?

theme-developmenttheme-twenty-tenheaders
1
Diventare Creative

Bon, ce que vous devez faire ici est de séparer l'en-tête dans son propre wrapper. Ce que j'ai fait pour que cela fonctionne est de fermer la div #wrapper juste après la fermeture de la div #header et de démarrer une nouvelle div avec la même classe hfeed et un nouvel ID autre que wrapper.

Devrait ressembler à ceci:

<div class="hfeed" id="wrapper">
    <div id="header">
        <div id="logo">...
        (stuff in here)
    </div><!-- #header -->
</div>
<div class="hfeed" id="wrapper-lower">
    <div id="main">
        <div id="container">...
        (so on, so forth)

Maintenant, si vous appliquez position: fixé à l'élément #wrapper, vous obtiendrez l'effet souhaité. Vous aurez toujours besoin de changer le mode de fonctionnement de vos graphiques pour vraiment vendre l'effet. Je pourrais suggérer d'utiliser un fichier .png où tout ce qui est sous la ligne rouge du swoosh est transparent. La taille du fichier sera beaucoup plus grande, mais si c'est la seule grande image que vous utilisez, tout ira bien.

Prèsque oublié! Vous devez également appliquer un remplissage supérieur à # wrapper-lower afin de le pousser au-delà de l'élément fixe. La hauteur de remplissage de # wrapper-lower doit être identique à la hauteur totale de #header.

0
Drew Gourley