J'ai un site Web avec un en-tête fixe, sur la page d'accueil, l'en-tête contient du contenu supplémentaire lorsque vous êtes en haut de la page, mais je souhaite cacher ce contenu et avoir une en-tête réduite lors de la défilement de la page.
Donc, sur le défilement initial, je souhaite cacher le contenu d'en-tête supplémentaire et animer la marge du contenu ci-dessous mais conservez-le de manière à ce que le haut du contenu affiche toujours sous-contre, puis faites défiler de la normale à partir de là. P>
Le snippet ci-dessous doit montrer ce que je veux dire mieux: p>
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="header"> <div id="main_header_content">Main header</div> <div id="extra_header_content">Extra Header</div> </div> <div id="page_content">This should still be visible when header initially reduces</div>
4 Réponses :
Vous pouvez le faire comme ceci:
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="header"> <div id="main_header_content">Main header</div> <div id="extra_header_content">Extra Header</div> </div> <div id="page_content">This should still be visible when header initially reduces</div>
Malheureusement, cela ne fonctionnera pas pour moi car j'ai toujours besoin du contenu pour être visible sur le défilement initial
C'est visible. Je vais réduire la hauteur un peu donc c'est plus évident
a dû changer quelques choses comme mon extrait minimisé ne donne pas la photo complète, mais cela m'a aidé à y arriver à la fin merci
Je peux vous offrir une approche différente sans JavaScript
p>
<div id="main-header"> Main </div> <div id="extra-header"> Extra </div> <div id="content"> <div></div> <div></div> <div></div> <div></div> <div></div> </div>
Cela pourrait être une solution si vous utilisez position Sticky et non corrigée, mais cela un peu saccadé, donc je posterai une autre solution ici avec une animation lisse
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">
<div id="main_header_content">Main header</div>
<div id="extra_header_content">Extra Header</div>
</div>
<div id="page_content">
<div class="page_content_wrapper">This should still be visible when header initially reduces</div>
</div>
<span class="hamBurger"></span>
Merci pour votre réponse, j'ai malheureusement utilisé des valeurs aléatoires pour les hauteurs des en-têtes, mon en-tête supplémentaire est en réalité plus grande que l'en-tête principal de la hauteur, donc si vous le modifiez à #extra_header_content {hauteur: 150px;} Vous verrez qu'il continue de monter et de descendre du bruit de fois jusqu'à ce que vous défiliez après un certain point
Vous devez modifier votre code JS. La marge que vous réduisez lorsque la page commence à défiler doit s'ajuster par remplissage. Donc, vous pouvez essayer ceci:
p>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="header"> <div id="main_header_content">Main header</div> <div id="extra_header_content">Extra Header</div> </div> <div id="page_content">This should still be visible when header initially reduces</div>
Merci de votre réponse, mais cette solution ne fonctionnera pas pour moi car le contenu a trop de marge pendant que l'en-tête supplémentaire est toujours visible et n'est pas visible lorsqu'il est défilé.
Vous êtes d'accord avec les petits changements de HTML?
@Atulrajput ouais je serais bien avec quelques changements, c'est juste une démo de toute façon, tout mon temps en HTML complet ne dépend probablement pas des changements et de la manière dont cela fonctionnerait avec mon contenu réel
Une autre question, voulez-vous que la page_Content d'animer avec la partie en-tête de cachette ou un effet saccadé normal fonctionnera aussi?
Je préférerais quelque chose de gentil et lisse au moment où il n'est pas génial, donc aucune amélioration serait brillante
Une méthode très simple pour vous est d'utiliser la position collante et non corrigée, c'est assez bon comme ça, je travaille sur une solution que je publierai bientôt, jusqu'à ce que puis essayez la solution collante que je donne ci-dessous