我添加了一个粘性标题和一个平滑的滚动效果,我无法弄清楚如何修复位置,因此它与标题大小一致。我尝试过的东西完全禁用了粘性标题。
虽然我是新手,但我尝试使用了几种不同的技术,对我来说这可能太难了。
<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>
//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");
}
}
这是我尝试过的一件事,但它禁用了我的粘贴标题:
$(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();
});
});
我以为我可以为总标题大小设置一个值并按照这种方式定位,尽管它会禁用粘性标题。我该怎么做呢?
这是我的网页:http://www.student.city.ac.uk/~aczc972
最好的问候,Danielle
我已经添加了一个沙箱如何使用jQuery,一般来说,我的网站只添加一个是我正在检查目标是什么,例如滚动到首页,如果是,我正在为它运行指定的代码:
if (targetHref === "#") {
$("html, body").animate(
{ scrollTop: 0 },
"1000"
);
} else {
$("html, body").animate({scrollTop: $(targetHref).offset().top},1000);
}
减去标题高度滚动以防止按标题覆盖内容
scrollTop: $(targetHref).offset().top - 180"
这不一定是执行此操作的最佳方式,但它是一个旨在说明如何完成此操作的示例。你不需要jQuery来实现这个效果,所以没有它值得尝试。
下面的代码修复了标头,并调整主包装器的填充以考虑标头的大小。然后它使用类section-link
在元素上设置监听器。对于这些元素,click事件将滚动到具有id的元素,该id对应于单击的元素的data-section
属性。
你可以忽略这个css,只是为了说明这可能有用。
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);
});
.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;
}
<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>
您还可以滚动到页面顶部,如:
将id="home"
添加到body并更改href:
<li class="current"><a href="#">Home</a></li>
到home
即
<li class="current"><a href="#home">Home</a></li>
应该使用您的代码