J'ai ajouté un en-tête collant et un effet de défilement fluide, et je ne peux pas comprendre comment fixer la position pour qu'elle compte avec la taille de l'en-tête. Les choses que j'ai essayées désactivent complètement l'en-tête collant.
J'ai essayé d'utiliser plusieurs techniques différentes, même si je suis un débutant et que ce sera peut-être trop difficile pour moi de le faire moi-même.
$(document).ready(function() {
var headerHeight = $('header').outerHeight(); // Target your header navigation here
$('#main-nav li a').click(function(e) {
var targetHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(targetHref).offset().top - headerHeight // Add it to the calculation here
}, 1000);
e.preventDefault();
});
});
//Smooth Scrolling in Main Nav
$(document).ready(function() {
$('#mainNav li a').click(function(e) {
var targetHref = $(this).attr('href');
$('html, body').animate({
scrollTop: $(targetHref).offset().top
}, 1000);
e.preventDefault();
});
});
// Sticky Header
window.onscroll = function() {
myFunction()
}; // When the user scrolls the page
var header = document.getElementById("sectionHome"); // Get the header and top nav
var sticky = header.offsetTop; // Get the offset position of the navbar
function myFunction() { // Add the sticky class to the header when you reach its scroll position. Remove "sticky" when you leave the scroll position
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
C'est une chose que j'ai essayée, mais cela a désactivé mon en-tête persistant:
<div id="container">
<section id="sectionHome">
<!--Header and Logo-->
<header id="myHeader">
<logo>
<img src="Pictures/Marvel-logo-880x660.crop.png">
</logo>
</header>
<!--The Top Navigation Menu-->
<div id="mainNav">
<ul>
<li class="current"><a href="#">Home</a></li>
<li><a href="#firstArticle">Characters</a></li>
<li><a href="#secondArticle">Movies</a></li>
<li><a href="#thirdArticle">More Info</a></li>
</ul>
</div>
</section>
Je pensais pouvoir définir une valeur pour la taille totale de l'en-tête et la positionner de cette façon, bien qu'il désactive l'en-tête collant. Comment faire cela correctement?
Voici ma page Web: http://www.student.city.ac.uk/~aczc972
Meilleures salutations, Danielle
3 Réponses :
Ce n'est pas nécessairement la meilleure façon de faire cela, mais c'est un exemple qui est conçu pour illustrer comment cela peut être fait. Vous n'avez pas besoin de jQuery pour obtenir cet effet, il vaut donc la peine de l'essayer sans.
Le code ci-dessous corrige l'en-tête et ajuste le remplissage du wrapper principal pour tenir compte de la taille de l'en-tête . Il met ensuite en place des écouteurs sur des éléments avec la classe section-link . Pour ces éléments, l'événement click défilera jusqu'à l'élément avec l'id qui correspond à l'attribut data-section de l'élément sur lequel vous avez cliqué.
Vous pouvez ignorer le css pour ceci qui n'a été ajouté que pour illustrer comment cela pourrait fonctionner.
<div class="wrapper">
<div id="top-header" class="header sticky">
<ul>
<li class="section-link" data-section="1">Item 1</li>
<li class="section-link" data-section="2">Item 2</li>
<li class="section-link" data-section="hello-world">Item hello world</li>
</ul>
</div>
<div id="1" class="section">
Test 1
</div>
<div id="2" class="section">
Test 2
</div>
<div id="hello-world" class="section">
Test 3
</div>
</div>
.header {
background-color: red;
border: solid 2px grey;
border-radius: 5px;
font-family: arial;
margin: 0 auto;
position: fixed;
top: 0;
left: 0;
right: 0;
width: 97%;
}
.header>ul {
list-style: none;
color: rgba(250, 250, 240, 0.8);
}
.header>ul>li {
cursor: pointer;
display: inline-block;
position: relative;
top: 0px;
transition: all 0.3s ease;
width: 200px;
}
.header>ul>li:hover {
color: rgba(250, 250, 240, 1);
top: -1px;
}
.section {
background-color: rgba(20, 20, 30, 0.2);
height: 80vh;
border-bottom: solid 2px black;
padding-top: 50px;
}
const padForHeader = () => {
// find out how high the header element is
const headerHeight = document.getElementById('top-header').clientHeight;
// how much extra padding would we like?
const headerPadding = 20;
// add the two together to see how much padding we need to add
const headerBufferSize = headerHeight + headerPadding;
// set the marginTop property so that the header doesn't overlay content
document.querySelector('.wrapper').style.marginTop = `${headerBufferSize}px`;
};
padForHeader();
// when the window resizes, re-pad for the header
window.addEventListener('resize', padForHeader);
document
.querySelectorAll('.section-link')
.forEach(element => {
// we want to scroll 'smoothly' to the element
const scrollOptions = {
behavior: "smooth"
};
// we can read the data attribute to find the matching element's id
const elementIdToScrollTo = element.dataset.section;
// we can use the id we found to get the corresponding element
const elementToScrollTo = document.getElementById(elementIdToScrollTo);
// we can set the onclick property to scroll to the element we found
element.onclick = () => elementToScrollTo.scrollIntoView(scrollOptions);
});
Merci! On dirait une solution alternative si cela ne fonctionne pas!
@DanielleJ il se peut que le réécrire de cette façon rendrait les choses plus faciles à travailler - quelque chose à considérer au moins
J'ai ajouté un bac à sable comment le faire en utilisant jQuery, en général, un seul ajout de mon site est que je vérifie quelle est la cible, par exemple. faites défiler jusqu'à la page supérieure, et si oui, j'exécute le code spécifié pour cela:
scrollTop: $(targetHref).offset().top - 180"
Soustraire le défilement de la hauteur de l'en-tête pour éviter de couvrir le contenu par l'en-tête
if (targetHref === "#") {
$("html, body").animate(
{ scrollTop: 0 },
"1000"
);
} else {
$("html, body").animate({scrollTop: $(targetHref).offset().top},1000);
}
Donc, ce qui se passe lorsque j'ajoute le code, c'est qu'il désactive l'en-tête collant et mon diaporama principal pour une raison quelconque. Votre code fonctionne parfaitement bien, même s'il est ajouté au mien, la même chose se produit. Je me demande ce qui me manque ici. Ceci est le site Web: student.city.ac.uk/~aczc972 Merci par le chemin! C'était génial!
Bienvenue, je peux voir une erreur sur votre page en cliquant sur accueil Erreur non interceptée: erreur de syntaxe, expression non reconnue: # ( kevinleary.net/jquery-syntax-error-unrecognized-expression ) veuillez vérifier si cela ne cause pas le problème
Ok cela vient de $ (targetHref) .offset (). Top vous ne pouvez pas obtenir d'élément comme $ (#)
Veuillez mettre à jour votre extrait ci-dessus afin que nous puissions l'examiner
Salut! Je l'ai mis à jour pour qu'il contienne votre code. Dois-je changer le #?
Le code que vous avez suggéré semble fonctionner dans le sens où il ne désactive pas l'en-tête collant ou ne supprime pas le diaporama principal, ce qui s'est produit auparavant. Cependant, il couvre toujours le contenu, donc je suppose que je dois entrer et modifier manuellement le positionnement du décalage dans le code?
Veuillez supprimer import jquery de "jquery"; et const $ = jquery; , je l'ai utilisé car je l'ai importé de node_modules (jquery peut être injecté ensuite par n'importe quel module bundler, par exemple webpack - je crois qu'ils l'utilisent sur codesandbox - webpack.js.org ). Vous devriez mettre plus d'attention dans votre console, afin que vous puissiez remarquer toute erreur :) Vous avez déjà eu jQuery sur la page donc pas besoin d'utiliser de bundler
Donc, j'aurais pu le résoudre en ajoutant - 180. "scrollTop: $ (targetHref) .offset (). Top - 180" Je mets à jour le FTP pour que vous puissiez voir. Il ne cache plus le contenu.
Merci beaucoup de m'aider! Il ne me reste que deux jours avant de devoir présenter mon site Web, donc cela causait un stress important. Maintenant, j'ai juste besoin de continuer et de réparer mon curseur glissant qui ne fonctionne pas. =)
On dirait que offset renvoie l'objet avec top left ( api.jquery.com/offset ), vous avez donc dû soustraire la hauteur de l'en-tête (si j'ai raison)
Oui, alors j'ai d'abord essayé de définir une variable headerHeight = 180px, et de prendre le haut moins headerHeight, bien que cela ait juste désactivé toute la fonctionnalité pour l'en-tête et le diaporama. Je devais juste ajouter - 180 pour soustraire la hauteur de la tête de la position.
Heureux de pouvoir aider, j'ai mis à jour la réponse pour qu'elle couvre entièrement la question. Pourriez-vous s'il vous plaît définir est comme répondu si cela vous a aidé?
Ajout d'une autre façon de faire défiler vers le haut