I always get scrolling bugged when I get back to the top to navbar that is in the middle of the page. When I scroll down it shrinks and sticks properly, but getting back to the top always moves my scroll because my navbar resizes back to normal.
Important sections are probably the javascript and than the place in css commented as "place where might be the problem with scrolling"
PS: It's my first website and a first post on stack overflow EVER, so please don't blame my styling and bad description :(.
<!doctype html>
<html>
<head>
<title>The Universe</title>
<link rel="stylesheet" href="style.css">
<script
src="https://code.jquery.com/jquery-3.4.1.js"
integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
crossorigin="anonymous">
</script>
</head>
<body>
<div class="container">
<div class="sunrise">
<section>
<h1>The Universe</h1>
<p class="subheader">and its mysteries</p>
</section>
</div>
</div>
<div class="fun_facts">
<div class="container">
<i>“Once you can accept the universe as matter expanding into nothing that is something,<br> wearing stripes with plaid comes easy.”</i>
</div>
</div>
<nav>
<a href="#" class="hide-desktop">
<img src="obrazky/gold_menu_icon.png" alt="toggle menu" class="menu" id="menu">
</a>
<ul class="show-desktop hide-mobile">
<li><a href="#xxx">Domů</a></li>
<li><a href="#yyy">O mně</a></li>
<li><a href="#zzz">Kontakt</a></li>
</ul>
</nav>
<div class="stars">
<div class="stars_content" id="xxx">
<div class="container">
<h2>AAAAAAAA AAA AAAAA</h2><hr>
<p>sss</p>
</div>
</div>
</div>
<div class="stars">
<div class="stars_content" id="yyy">
<div class="container">
<h2>BBBBBBB BBB BBBBBB</h2><hr>
<p>sss</p>
</div>
</div>
</div>
<div class="stars">
<div class="stars_content" id="zzz">
<div class="container">
<h2>CCCC CCC CCCCCC</h2><hr>
<p>sss</p>
</div>
</div>
</div>
<footer class="footer">
</footer>
<script type="text/javascript">
/* script that makes navbar shrink on scroll and than resize when I get back to the top */
var position = 1;
$(window).on("scroll", function()
{
if (position <= -705)
{
console.log(position = $('a').offset().top - $(window).scrollTop());
$("nav").addClass("class_nav");
//$("nav").addClass("class_nav_ul_li");
}
else
{
console.log(position = $('nav').offset().top - $(window).scrollTop());
$("nav").removeClass("class_nav");
//$("nav").removeClass("class_nav_ul_li");
}
})
//scrolling animation to each div
// Select all links with hashes
$('a[href*="#"]')
// Remove links that don't actually link to anything
.not('[href="#"]')
.not('[href="#0"]')
.click(function(event) {
// On-page links
if (
location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '')
&&
location.hostname == this.hostname
) {
// Figure out element to scroll to
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
// Does a scroll target exist?
if (target.length) {
// Only prevent default if animation is actually gonna happen
event.preventDefault();
$('html, body').animate({
scrollTop: target.offset().top
}, 1000, function() {
// Callback after animation
// Must change focus!
var $target = $(target);
$target.focus();
if ($target.is(":focus")) { // Checking if the target was focused
return false;
} else {
$target.attr('tabindex','-1'); // Adding tabindex for elements not focusable
$target.focus(); // Set focus again
};
});
}
}
});
</script>
</body>
</html>
body {
margin: 0;
background-color: black;
}
p {
font-size: .9em;
line-height: 1.6em;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
.container {
text-align: center;
//padding: .8em 1.2em;
//background: yellow;
}
header {
//background: yellow;
/* needed to have section aligned to the center of THE PAGE not just center of its own side */
}
section {
margin-top: 4em; /*FIXNUTI GOLD MENU BUTTONU;*/
//background: green;
margin-left: auto;
margin-right: auto;
}
.sunrise {
background: url(obrazky/sunrise.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
height: auto;
padding-bottom: 10px;
display: flex;
}
.menu {
width: 50px;
//margin: 100% 0% 0% 100%;
margin-top: 60%;
margin-left: 60%;
}
h1, h2, .subheader {
position: relative;
z-index: 3;
}
h1 {
font-size: 8em;
color: gold;
text-shadow: 5px 5px 8px gold;
margin-top: -30px;
}
h2 {
font-size: 3em;
//color: rgb(7, 207, 200);
color: rgb(218, 165, 32);
//text-shadow: 5px 5px 8px rgb(5 237 218);
}
.subheader {
font-size: 5em;
color: gold;
text-shadow: 5px 5px 8px gold;
}
.fun_facts {
background-color: transparent;
padding-top: 50px;
padding-bottom: auto;
font-size: 2.5em;
color: white;
text-shadow: 5px 5px 8px white;
}
.stars {
background: url(obrazky/moon.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
margin-top: -17em;
padding: 12em 100px; /* padding: 2em 20px; */
}
.stars_content {
margin-top: 17em;
color: white;
padding: 50px 150px 100px;
//background: rgba(8, 6, 46, 0.85);
//background: rgba(7, 59, 59, 0.85);
//background: rgba(7, 50, 59, 0.85);
background: rgba(38, 40, 41, 0.85);
height: 700px;
border-radius: 100px;
// clip-path: polygon(0 0%, 100% 0, 100% 100%, 0 100%);
}
.stars_content p {
margin-top: 10px;
font-size: 50px;
color: rgb(218, 165, 32);
}
.stars_content hr {
border: 5px solid rgb(218, 165, 32); /*5 240 218*/
margin: -10px -140px;
border-radius: 200px;
}
/************* PLACE WHERE MIGHT BE THE PROBLEM WITH SCROLLING *************/
.show-desktop {
display: block;
margin: 0 auto 13% auto;
}
.hide-desktop {
display: none;
}
nav {
margin-top: 3.5em;
margin-bottom: 7em;
background: url(obrazky/earth.jpg) no-repeat center;
background-size: cover;
background-attachment: fixed;
height: auto;
display: flex;
clip-path: polygon(0 15%, 100% 0, 100% 85%, 0 100%);
}
nav.class_nav {
clip-path: none;
z-index: 4;
height: 100px;
top: 0;
position: sticky;
}
nav.class_nav ul li {
padding: 1em;
margin-top: 0;
}
nav.class_nav ul li a{
font-size: 20px;
padding: 1em 2em;
}
nav ul {
background: none;
height: auto;
width: auto;
padding-bottom: 0px;
}
nav ul li {
float: left;
padding-top: 10.5em;
padding-bottom: 0;
margin-left: auto;
margin-right: auto;
}
nav ul li a {
color: gold;
background-color: #1a1400;
text-align: center;
padding: 1em 2em;
font-size: 40px;
text-decoration: none;
display: block;
border-radius: 80px;
box-shadow: 10px 10px 15px black;
}
nav ul li a:hover {
background-color: #4d3d00;
}
Aucun commentaire:
Enregistrer un commentaire