'How to fix offset of parent anchor element after img is shifted by interactive js?
I have stumbled into an issue with my image that functions as a button for my home (index.html) page.
When my javascript causes the header to move down after a scroll is triggered, it changes the positioning of my anchor element as well.
Here is an image example of what I am referring to:
Notice the anchor image does not actually have the pointer effect during hover.
window.addEventListener("scroll", function () {
var header = document.querySelector("header"); // to header element
header.classList.toggle("sticky", window.scrollY > 0)
}) // make sticky class when > 0 * {
font-family: 'Fira Sans', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*background-color: #fff;*/
min-height: 200vh;
background-color: white;
}
header {
position: fixed;
top: 0;
left: 0;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
transition: 0.6s;
padding: 40px 100px;
z-index: 100000;
}
.header_cta h1 {
font-size: 4em;
color: #fff;
text-align: center;
/* padding-bottom: 5em; */
}
.header_cta h3 {
font-size: 2em;
color: #fff;
text-align: center;
padding-bottom: 1em;
}
header .sticky {
padding: 5px 100px;
background: #fff;
}
.logo img {
width: 20%;
top: 19px;
left: 4px;
height: 20%;
margin: -21.5rem 61rem -1rem -3rem;
}
header ul {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
header ul li {
position: relative;
list-style: none;
}
header ul li a {
position: relative;
margin: 0 15px;
text-decoration: none;
color: #fff;
letter-spacing: 2px;
font-weight: 500px;
transition: 0.6s;
}
.home-banner {
position: relative;
width: 100%;
height: 100%;
background: url();
background-size: cover;
}
header.sticky {
background: rgb(255, 255, 255);
padding: 15px;
}
header.sticky .logo,
header.sticky ul li a {
color: #000;
}
h2 {
font-size: 2rem;
}
p {
font-size: 1rem;
}
.home_page_header {
justify-content: center;
/* The CSS justify-content property defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container. */
text-align: center;
padding-top: 50vh;
padding-bottom: 25vh;
/* -webkit-filter: grayscale(75%); */
/* for Safari 6.0 - 9.0 */
/* filter: grayscale(75%); */
background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(/BEGIN_NOW/images/stressed.jpeg);
background-size: cover;
background-position: center;
}
/*
.navigation_bar li {
float: left;
}
*/
nav {
display: flex;
padding: 2% 6%;
/* Percentages: The padding size is relative to the width of that element's content area (i.e. the width inside, and not including, the padding, border and margin of the element). So, if your #wrapper is 940px wide, 5% padding = 0.05 × 940pixels = 47 pixels.*/
justify-content: space-between;
align-items: center;
}
nav img {
width: 300px;
}
.navigation_bar {
position: fixed;
/* Stays on viewport screen. Your tab. An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled.*/
/* background-color: rgb(242, 242, 242); */
top: 0;
flex: 1;
/*The flex CSS shorthand property sets how a flex item will grow or shrink to fit the space available in its flex container. */
text-align: right;
transition: top 0.3s;
}
/* How to make nav bar background appear after
.navigation_bar.scrolled {
background-color: #000;
} */
.navigation_bar ul {
padding-left: 16rem;
}
.navigation_bar ul li {
/* parent -> child */
list-style: none;
display: inline-block;
padding: 24px 12px;
position: relative;
}
.navigation_bar ul li a {
color: #fff;
text-decoration: none;
font-style: 13px;
}
.navigation_bar ul li::after {
/* In CSS, ::after creates a pseudo-element (keyword added to a selector that lets you style a specific part of the selected element(s)) that is the last child of the selected element. It is often used to add cosmetic content to an element with the content property. It is inline by default. */
content: '';
width: 0%;
height: 2px;
background: #fff;
display: block;
margin: auto;
/* the browser calculates the margin, is decided by browser, Margins are used to create space around elements, outside of any defined borders. */
transition: 0.5s;
}
.navigation_bar ul li:hover::after {
width: 100%;
background-color: rgba(247, 238, 238, 0.756);
}
.navigation_bar ul li a:hover {
color: rgba(247, 238, 238, 0.756);
}
.cta h2 {
font-size: 6em;
color: #000;
text-align: center;
/* padding-bottom: 5em; */
}
.cta h3 {
color: #000;
text-align: center;
padding-bottom: 20px;
}
/* iframe {
flex-wrap: nowrap;
margin: 10rem;
position: absolute;
top: 0;
bottom: 0;
left: 50;
right: 50;
z-index: 100;
height: 70%;
width: 70%;
} */
section.videos {
/* position: absolute; */
margin: 10rem;
}
/*
.hamza_video {
display: flex;
margin-left: auto;
margin-right: auto;
} */
.home-header-btn {
/* make own eventually */
display: inline-block;
/* Compared to display: inline, the major difference is that display: inline-block allows to set a width and height on the element.
https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1 */
text-decoration: none;
color: #fff;
border: 1px solid #fff;
padding: 12px 34px;
font-style: 13px;
background: transparent;
position: relative;
/* An element with position: relative; is positioned relative (in consideration of the original) to its normal position.*/
cursor: pointer;
}
.home-header-btn:hover {
/* grayscale is breaking this?*/
border: 1px solid #ff0808;
background: #ff0808;
transition: 0.8s;
}
.gradient {
width: 150vh;
height: 50vh;
position: relative;
background-image: linear-gradient(0deg, transparent, #000);
top: 3vh;
z-index: 9;
}
.hook {
background-color: white;
margin: auto;
}
div.questions {
color: #000;
margin: 0 5rem;
}
div.questions.question_left {
text-align: left;
}
img {
margin: -7px 5rem;
}
.questions_right {
padding-top: 100px;
text-align: right;
}
/* div.questions.questions_left {} */
.textbox {
background-color: rgb(238, 237, 237);
margin: 5rem 0 0 0;
padding-bottom: 5rem;
}
div .textbox.one {
margin-top: 5rem;
}
.questions_right p {
text-align: right;
padding-left: 50px;
padding-top: 20px;
}
.questions h2 {
padding-top: 50px;
padding-left: 50px;
font-size: 2.5rem;
text-align: left;
}
.what_to_do {
width: 25%;
float: right;
padding: 20px;
}
.questions p {
text-align: left;
padding-left: 50px;
padding-top: 20px;
}
.questions h2 {
font-size: 2rem;
padding: 9rem 3rem 1rem;
}
.questions_right h2 {
padding: 11rem 1rem 1rem 1rem;
margin-top: 57px;
}
.light_woman {
width: 40%;
float: left;
padding: 20px;
padding-top: 7rem;
margin: 4rem;
/* margin: 100px 10px;
margin-top: 115px; */
}
.stretched_out {
width: 40%;
float: right;
padding: 20px;
margin: 35px 24px 10px 100px;
}
.my_mission {
background-color: #fff;
padding: 14rem;
}
.my_mission h3 {
font-size: 2rem;
padding-bottom: 1rem;
text-align: center;
}
.value_provided {
padding: 7rem 0;
text-align: center;
background-color: rgb(238, 237, 237);
}
.value_provided p {
font-size: 18px;
}
.value_provided ul {
margin: 3rem;
}
.value_provided li {
margin: 1rem;
}
.how_i_began h3 {
text-align: center;
font-size: 2rem;
margin: 2rem;
}
.quote {
text-align: center;
}
.story h2 {
text-align: center;
margin: 2rem;
margin-top: 40rem;
color: #000;
}
.xop-section {
max-width: 960px;
margin: 0 auto;
padding: 6% 2%;
}
.xop-grid {
margin: 20px 0 0 0;
padding: 0;
list-style: none;
display: block;
text-align: center;
width: 100%;
}
.xop-grid:after {
clear: both;
}
.xop-grid:after, .xop-box:before {
content: "";
display: table;
}
/* ^ For accomodating Internet Explorer */
.xop-grid li {
width: 328px;
height: 328px;
display: inline-block;
margin: 20px;
}
/* ^ Size of the box and how it is displayed */
.xop-box {
width: 100%;
height: 100%;
position: relative;
cursor: pointer;
border-radius: 10px;
-webkit-transition: 0.3s ease-in-out, -webkit-transition 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out, -moz-transition 0.3s ease-in-out;
}
.xop-box:hover {
transform: scale(1.05);
}
.xop-img-1 {
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-img-2 {
background-image: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-img-3 {
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-img-4 {
background: linear-gradient(rgba(0, 0, 0, 0.50), rgba(0, 0, 0, 0.10)), url(/BEGIN_NOW/images/stressed.jpeg);
}
.xop-info {
position: absolute;
width: inherit;
height: inherit;
}
.xop-info h3 {
font-family: 'Fira Sans', cursive;
font-weight: 400;
color: #fff;
font-size: 42px;
margin: 0 30px;
padding: 100px 0 0 0;
line-height: 1.5;
}
/* Browser support for transitions and transform properties smooth transition*/
.xop-info p {
font-family: 'Source Sans Pro', sans-serif;
color: #fff;
}
.links {
height: 10%;
margin: 0rem -183px 0px 13rem;
}
.cta h2 {
text-align: center;
margin: 2rem;
}
.footer {
padding-top: 5rem;
text-align: center;
background-color: #000;
color: #fff;
display: flex;
flex-wrap: wrap;
}
.footer .left_bio_section {
float:left;
width: 38%;
}
.footer .right_links_division {
width: 42%;
display: inherit;
margin: 2rem 0 0 110px;
flex-wrap: wrap;
}
.quote-hard-work {
margin-left: auto;
margin-right: auto;
}
.footer h3 {
text-align: left;
margin: 0rem 0px 0px 5rem;
}
.left_bio_section h4 {
text-align: left;
margin: 10px 0rem 3rem 5rem;
}
.right_links_division h4:hover { /* broken */
/* position: absolute; */
/* position: relative; */
/* bottom: ; */
/* left: 0; */
/* width: 100%; */
height: 2px;
content: "";
background-color: #fff;
/* transition: transform .2s cubic-bezier(.4,0,.2,1); */
/* transform: scaleX(0); */
/* transform-origin: left; */
}
.right_links_division h4 {
margin: 2rem;
display: flex;
}
.footer hr {
-webkit-transform:rotate(90deg);
/* position: absolute; */
width:20%;
height:2px;
margin: 0px 0px 0px 33rem;
}
.footer .closing_text {
padding-right: 2rem;
margin-left: 5rem;
text-align: left;
}
.links_division {
display: flex;
flex-wrap: wrap;
margin: 0 0 0 35rem;
}
.icons h4 {
margin: 0 0 0 0;
}
.icons
{
/* background-color: rgb(63, 63, 68); */
background-color: rgb(76, 60, 84);
padding: 5rem;
}
.img_effect {
transition: 1s;
}
.img_effect:hover {
transform: scale(1.1);
z-index: 5;
}
main {
color: #fff;
padding: 5rem;
}
main p {
color: #fff;
}
/* transition: 0.5s;
:hover {
box-shadow: 0 0 20px 0px rgba(0, 0, 0, 0.2);
} */
@media(max-width: 700px) {}
/* Word for word copy for fixed nav. css */
/* Look for effects */
/* GO into inspect -> styles and check tick boxes to see changes!<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fira+Sans:wght@300;400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style_v2.0.css">
<script src="script_v2.0.js"></script>
<title>Begin, now!</title>
</head>
<!-- Top website header -->
<body>
<div>
<section class="home_page_header">
<div>
<!-- <section class="home_page_header"> -->
<!--- <a href=""><img src="" alt=""></a> Logo & redirect home page link-->
<header>
<nav>
<a href="/BEGIN_NOW/v2.0/index_v2.0.html" class="logo"><img src="/BEGIN_NOW/images/icon2.png" alt="Gear with white bars and an arrow going up.">
<!-- <img src="" alt=""> -->
</a> <!-- Logo & redirect home page link -->
<div class="navigation_bar" id="navigation_links">
<ul>
<li><a href="/BEGIN_NOW/other pages/books.html">BOOKS</a></li>
<li><a href="/BEGIN_NOW/other pages/learn.html">LEARN</a></li>
<li><a href="/BEGIN_NOW/other pages/motivation.html">MOTIVATION</a></li>
<li><a href="/BEGIN_NOW/other pages/strategies.html">STRATEGIES</a></li>
<li><a href="/BEGIN_NOW/other pages/struggling.html">STRUGGLING</a></li>
</ul>
</div>
</nav>
</header>
</div>
<!-- <nav>
<div class="navigation_bar" id="navigation_links">
<ul>
<li><a href=" books.html">BOOKS</a></li>
<li><a href="invest.html">INVEST IN YOU</a></li>
<li><a href="motivation.html">MOTIVATION</a></li>
<li><a href="strategies.html">STRATEGIES</a></li>
<li><a href="strategies.html">STRUGGLING</a></li>
</ul>
</div>
</nav> -->
<div class="header_cta">
<h1>Are you procrastinating?</h1>
<h3>Begin. NOW.</h3>
<a href="" class="home-header-btn">Save Yourself.</a>
<!-- some button, lead to video or another motivation page-->
</div>
</section>
<section class="home-banner"></section>
<!-- <div class="gradient"></div></div> -->
<!-- Sections of the website, similar to the nav page, featuring a few vids, books, and quotes -->
<!-- Hook, a question. Big. Gradually smaller centered. -->
<section class="hook">
<div class="questions questions_left">
<img src="/BEGIN_NOW/images/much_to_do.jpeg" alt="Stressed man." class="what_to_do img_effect">
<div class="textbox">
<h2> There is so much to do, <br>so what should you be doing?</h1>
<p>For every single individual, we are all exposed to a gamut of different opportunities. However, due to our inherent nature of putting things off, we tend to have certain regrets in various sections of our lives. In order to respond to this pressing issue, this website is devoted towards maximizing your life through lessons that have been shared and explored.
</p>
</div>
</div>
<div class="questions questions_right">
<img src="/BEGIN_NOW/images/consider.jpeg" alt="Woman looking a screen in dark."
class="light_woman img_effect">
<div class="textbox">
<h2>Consider your future. What do you want to do?</h2>
<p>All the opportunities presented to us lead to different futures. We have the choice of picking the future we desire to follow. Procrastination is one of the main issues that delays our progress towards our dreams, so we must find ways to effectively use our time by limiting procrastination.
</p>
</div>
</div>
<div class="questions questions_left">
<img src="/BEGIN_NOW/images/stretched_out.jpeg" alt="Silhoutte of man with arms stretched out. "
class="stretched_out img_effect">
<div class="textbox">
<h2>It's okay to be lost. Let's reach greatness together.</h3>
<p>
On the path towards success, it is easy to get frustrated, lost, and distracted. This website will act as a fuel source, mentor, and supporter for your future endeavors. No matter what circumstances, never stop learning, experiencing, and improving.
</p>
<p>
As Martin Luther King Jr. once said: “If you can't fly then run, if you can't run then walk, if you can't walk then crawl, but whatever you do you have to keep moving forward.
</p>
</div>
</div>
</section>
<!-- <section class="home-banner"></section>
<script type="text/javascript">
window.addEventListener("scroll", function () {
var header = document.querySelector("header"); // to header element
header.classList.toggle("sticky", window.scrollY > 0)
}) // make sticky class when > 0
</script> -->
<!-- <div class="gradient"></div></div> -->
<!-- Mission Statement & Purpose -->
<section class="my_mission">
<!-- mission add here quoet -->
<div class="value_provided">
<h3>The value I provide you.</h2>
<p>This website will:</p>
<ul>
<li>Remind you of how to deal with hesitancy and procrastination.</li>
<li>Support your journey of growth.</li>
<li>Provide insight on how to deal with problems.</li>
</ul>
</div>
</section>
<!-- My Story So Far-->
<section class="my-answer">
<div class="how_i_began">
<h3>How I Started</h3>
<p></p>
<p></p>
</div>
<p></p>
<p></p>
<div class="what_learned"></div>
</section>
<!-- Quote -->
<section class="quote">
<q class="quote_text">Insert Quote Here</q>
</section>
<!-- Rises-->
<!-- CTA -->
<section class="cta">
<h2>Let's become greater.</h2>
<h3>Begin your improvement journey now.</h3>
<p>Mandatory viewing - Self-Improvement Coach Hamza Ahmed</p>
<iframe width="420" height="315" src="https://www.youtube.com/embed/PYaixyrzDOk"
class="hamza_video"></iframe>
<!-- Insert video -->
</section>
<!-- Story -->
<section class="story">
<h2>My Story</h2>
<!-- img grid -->
<div class="xop-section">
<ul class="xop-grid">
<li>
<div class="xop-box xop-img-1">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
<li>
<div class="xop-box xop-img-2">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
<li>
<div class="xop-box xop-img-3">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
<li>
<div class="xop-box xop-img-4">
<a href="#">
<h3>Paint</h3>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Incidunt quia eum ad eaque
vel inventore iste dolore, esse tempore, alias obcaecati facere veniam perferendis
cupiditate.</p>
</a>
</div>
</li>
</ul>
</div>
</section>
<!-- CSS Mask arms -->
<!-- Footer -->
<div class="icons">
<h4>Contact Me</h4>
<i class="fa fa-instagram"></i>
<!-- facebook, gmail -->
</div>
<section class="footer">
<div class="left_bio_section">
<h3></h3>
<h4>Author</h4>
<hr>
<p class="closing_text">Student and Life-long learner
Every day, spends time learning from the past, maximizing the present, and setting up the future he dreams of. As a growing teenager, he learns about the importance of a myriad of components that make up a good life, and he wishes to communicate his experiences to people around the world.
</p>
</div>
<h4 class="links">LINKS</h4>
<div class="right_links_division">
<h4>BOOKS</h4>
<h4>LEARN</h4>
<h4>MOTIVATION</h4>
<h4>STRATEGIES</h4>
<h4>STRUGGLING</h4>
</div>
<!-- <h4>BACK TO TOP</h4> -->
<!-- <p>Made with <i class="fa fa-heart-o"></i> by Easy Tutorials</p> -->
<q class="quote-hard-work">Do the hard work, especially if you don't feel like it. - Hamza</q>
</section>
</body>
</html>
<!-- sections and divs to access each portion in the homepage
similar to blue origin links, image
html->css->js
-->
<!-- FUTURE
using - to seperate ids, classes
interactive = id
using _ for variables
-->Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|