Making navbar sticking to it's previous position - javascript

I made my navbar to stick to the top only when I scroll down. But again when I scroll up then it instantly gets to the bottom(it's previous position). I want my navbar to stick to the previous position when it's showing in the window. Here is my code-
HTML:
<section class="section-1">
<img class="logo" src="./Assets/Asset 2#3x.png" width="320" alt="Brand Icon">
<p class="description">Luxury Jewelry Store</p>
<nav class="navbar">
Home
My Cart
My Orders
FAQs
About Us
<div class="search">
<i class="fa-solid fa-magnifying-glass searchIcon"></i>
<input class="searchBox" placeholder="Search..." type="search">
<input type="submit" value="Search" class="searchButton">
</div>
</nav>
</section>
CSS:
.section-1{
height: 100vh;
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: relative;
}
.navbar{
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 50px;
background-color: #92A9BD;
position: absolute;
bottom: 0;
transition: all 0.3s;
z-index: 1;
}
.sticky{
position: fixed;
top: 0;
left: 0;
right: 0;
}
JS:
window.onscroll = function() {
const navbar = document.querySelector(".navbar");
if (window.pageYOffset > navbar.offsetTop) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
};

you just need to change the position from fixed to sticky
.sticky{position : sticky;
top:0;
left:0}
no need to mess with right;

As #harsh-deep and #Zeikman suggested, I removed the JS code and just used sticky as position-
.sticky {
position: sticky;
top: 0;
}
and in html file I added sticky to the nav element.
It was really simple! Thank You!

Related

Need help to hover different background images in wordpress HTML code

I want exactly like this website: https://www.petzl.com/INT/en
I have displayed background video, 3 texts, by hovering on them the images are changing + links to access them.
But by hovering the text, petzl.com website have activated different images on hover, sometimes different images are appearing on hover.
Can I achieve the different images by css or need to have js or anything? Also need to have span/div elements to appear in one line.
My website link: beta.edgerope.com
Please find code below:
Below is the code, I have added as HTML shortcode in the page and in the background video is displayed
<style>
.image{
height: 800px;
width: 100%;
display: grid;
place-content:center;
justify-content:middle;
color: white;
font-size:30px;
background-color: #;
background-position: center;
background-size: cover;
}
.training{
display:inline-block;
padding-top: 50px;
padding-right: 1500px;
padding-bottom: 50px;
padding-left: 1px;
}
.image>div {
display: inline-block;
width: 100px;
}
.image>div img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
object-fit: cover;
opacity: 0;
z-index: 0;
display: inline-block;
}
.image>div span {
position: relative;
z-index: 1;
cursor: pointer;
display: inline-block;
}
.image>div span:hover+img {
opacity: 1;
display: inline-block;
}
.div{
dipslay
}
</style>
<div class="image">
<div class="services">
<span class="services" onclick="window.location=''">Services</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ">
</div>
<div class="Training">
<span class="training" onclick="window.location='beta.edgerope.com/courses'">Training</span>
<img src="https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg"> </div>
<div class="shop">
<span class="shop" onclick="window.location='beta.edgerope.com/shop'">Shop</span>
<img src="https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ"> </div>
</div>
:
There are many ways to acomplish this, and you should be able to do this with pure css and html.
I've made an example that uses css pseudo elements in order to display the correct image when hovering the sections/links. Also changed up to use a tags instead of using onclick="window.location" as you did.
Here you can change/set the default image in the #hero selector
<style>
/* Styling for the default hero */
#hero {
height: 800px;
width: 100%;
display: flex;
color: black;
background-color: #000;
}
/* Wrapper for all the sections */
.hero-sections {
width: 100%;
height: 100%;
position: relative; /* Allows to change the z-index, and */
z-index: 1;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 2rem;
}
/* Container for the image */
.hero-image::after {
content: "";
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: -1; /* Allows the image to appear behind the text */
pointer-events: none; /* Prevent image to show when hovering the ::after element*/
background-image: var(
--bg-url
); /* Uses the images set by the html (css variable) */
opacity: 0; /* Hides the image when it's not active */
transition: opacity 0.5s; /* Adds a fade transition to the opacity*/
}
/* Styles when the the user hovers or has focus on the buttons/links */
.hero-image:is(:hover, :focus-within)::after {
opacity: 1; /* Change the opacity when the text is active/in hover */
}
/* Styles the buttons/links */
.hero-cta {
color: white;
text-decoration: none;
font-size: 2rem;
}
</style>
<div id="hero">
<div class="hero-sections">
<div
class="services hero-image"
style="
--bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
"
>
<a class="hero-cta" href="#">Services</a>
</div>
<div
class="training hero-image"
style="
--bg-url: url(https://beta.edgerope.com/wp-content/uploads/2022/08/1-1-1536x864.jpg);
"
>
<a class="hero-cta" href="beta.edgerope.com/courses">Training</a>
</div>
<div
class="shop hero-image"
style="
--bg-url: url(https://www.petzl.com/sfc/servlet.shepherd/version/download/0686800000D6sSCAAZ);
"
>
<a class="hero-cta" href="beta.edgerope.com/shop">Shop</a>
</div>
</div>
</div>
If you would like to go more advanced here I would recommend implementing some javascript handling mouseenter and mouseleave. As you said you used Wordpress you could also use the .hover() from jQuery.

Sticky position of nav change background at scroll position

I want the <nav> to be fixed with the 3 numbers. When it reaches the green square, it should go OVER the numbers and stay fixed and turn red. And when you go back to the top, it should go back to it's original position and go back to green. How would I achieve this?
.container {
height: 1000px;
}
nav{
display: flex;
justify-content: space-around;
}
.square{
background-color: green;
width: 100px;
height: 100px;
margin: auto;
display: block;
position: sticky;
}
<div class="container">
<header>
<nav>
<p>1</p>
<p>2</p>
<p>3</p>
</nav>
</header>
<div class="square"></div>
</div>
you can use javascript to detect scroll and use window.onscroll to add sticky class to your element, also note that when using sticky CSS attribute value for display you should also adjust the location, I used calc to calculate the left value, here is a working snippet:
window.onscroll = function() {myFunction()};
var header = document.querySelector(".square");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
.container {
height: 10000px;
}
nav {
display: flex;
justify-content: space-around;
}
.square {
background-color: green;
width: 100px;
height: 100px;
margin: auto;
display: block;
}
.sticky {
position: fixed;
top: 0;
background-color:red;
left: calc((100% - 100px)/2);
}
.sticky + .content {
padding-top: 102px;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<header>
<nav>
<p>1</p>
<p>2</p>
<p>3</p>
</nav>
</header>
<div class="square"></div>
</div>
</body>
</html>
For changing backgroung-color, you need to look in the animation way, but, according the positioning, you need to add something like top: 0 to set in what position you component will be sticky.

Footer moves strangely at Edge

It is my HTML & Javascript code:
footer {
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
}
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
"Javascript"
Jscode
I want Edge to be like this
Edge does not fit on the screen. Also, footer stops on the spot.
I tried both Javascript and CSS but it didn't work on Edge when there is no element at the bottom of the screen. I want to be at the bottom of the page when there are more elements than the screen.
I recommend using CSS grids for all HTML templates. Otherwise it can be difficult to keep footer at the bottom for all screen sizes.
That being said, try using flexbox.
Insert all of your html in main and flexbox will push footer to the bottom of the page.
/* The magic: */
.Site {
display: flex;
min-height: 100vh;
flex-direction: column;
}
.Site-content {
flex: 1;
}
/* Stlyes to make the demo easier to see: */
body { margin: 0; }
header { background-color: #FD2D; }
main { background-color: #DFDD; }
footer {
background-color: #049e8c;
height: 50pt;
text-align: right;
bottom: 0;
}
<body class="Site">
<header>Header</header>
<main class="Site-content">Content</main>
<footer>Footer</footer>
</body>
If you want to try CSS Grids, you need to do something like this.
All HTML content goes into the Site-content section. Hope this helped :)
/* Stlyes to make the demo easier to see: */
html{
height: 100%;
}
body {
margin: 0;
display: grid;
height: 100%;
grid-template-areas:
"header_section"
"Site-content_section"
"footer_section";
grid-template-rows: 100px 100% 50px; /* 100px for header, 100% for content section, 50px for footer */
}
.header {
grid-area: header_section;
background-color: #FDD;
}
.Site-content {
grid-area: Site-content_section;
background-color: #DFD;
}
.footer {
grid-area: footer_section;
background-color: #049e8c;
text-align: right;
}
<body>
<div class= "header">Header</div>
<div class="Site-content">Content</div>
<div class= "footer">Footer</div>
</body>
I don't exactly get the point inside the question. Maybe If You want to put your footer full the windows you can try to use "position" with the value "absolute
footer {
position:absolute;
background-color: #049e8c;
width: 100%;
height: 50pt;
text-align: right;
margin-top: auto;
bottom: 0;
left:0;
}
<body>
<footer id="footer">
<div id="" class="">
hoge
hoge
</div>
</footer>
</body>

How to put 2 text box over a fluid img ? one top left, the other bottom right - see screenshot

I want two text boxes overlay an image taged as img-fluid in bootstrap 4.
The first text-box will be at the top left, overlapping the image about 5%.
The other should be at the bottom right, overlapping also about 5%.
You can look here at this screenshot: layout
I trying several solutions, but no one works ....
Here is the html code:
<div class="jumbotron jumbotron-fluid jumbotron-no-padding">
<div class="jumbotron-img">
<div class="jumbotron-img-caption-top">
<h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1>
</div>
<img src="img/wetzlar_full.jpg" class="img-fluid">
<div class="jumbotron-img-caption-bottom">
<h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1>
</div>
</div>
</div>
and here the css:
.jumbotron-no-padding {
padding: 0px!important;
}
.jumbotron-img {
position: relative;
}
.jumbotron-img img{
position: absolute;
top: 5%;
}
.jumbotron-img-caption-top {
position: absolute;
top: 0%;
right: 20rem;
width: 100%;
background-color: #fff1c2;
padding: 1.5rem;
padding-left: 21.5rem;
}
.jumbotron-img-caption-bottom {
position: absolute;
top: 95%;
left: 20rem;
width: 100%;
background-color: #fff1c2;
padding: 1.5rem;
}
.jumbotron-imgn h2 {
line-height: 3rem;
vertical-align: middle
}
Can somebody help me?
How about something like this. I am setting the text wrappers to width:auto and setting their position to left or right. I am setting either the top or bottom to 0 and then using transform:transplateY(-50%) to compensate for the height of the text wrappers.
I removed the absolute position from .jumbotron-img img because it it didn't seem to be needed and it was causing .jumbotron-img height to collapse so the absolute positioned positioned child elements couldn't position properly.
body {
padding-top:100px;
padding-bottom:100px;
margin:0;
}
img {
max-width:100%;
height:auto;
}
* {
box-sizing: border-box;
}
.jumbotron-no-padding {
padding: 0px!important;
}
.jumbotron-img {
position: relative;
}
.jumbotron-img-caption-top {
position: absolute;
top: 0;
left: 0;
width:auto;
background-color: #fff1c2;
padding: 1.5rem;
transform: translateY(-50%);
}
.jumbotron-img-caption-bottom {
position: absolute;
top: 100%;
transform: translateY(-50%);
right:0;
width: auto;
background-color: #fff1c2;
padding: 1.5rem;
}
.jumbotron-imgn h2 {
line-height: 3rem;
vertical-align: middle
}
<div class="jumbotron jumbotron-fluid jumbotron-no-padding">
<div class="jumbotron-img">
<div class="jumbotron-img-caption-top">
<h1>Hotel + Restaurant <span class="fraktur">Bürgerhof Wetzlar</span></h1>
</div>
<img src="https://dummyimage.com/1920x1080/000000/0011ff" class="img-fluid">
<div class="jumbotron-img-caption-bottom">
<h1>der perfekte Start für Ihre Tour in und um Wetzlar!</h1>
</div>
</div>
</div>

Display none takes up space

I'm having some trouble with my Pagination nav that is display:none. When I check on inspect element it takes no space, but for some reason, where the pagination nav is, there's an empty space that is not supposed to be there.
I've tried adding overflow:hidden, visibility:none, height:0, but none of it it's working.
Maybe it's something to do with position relative and absolute, I don't understand it very well yet.
themeexp1.tumblr.com
Edit: It's not the 14px margin, it's a much bigger margin
Empty space: http://postimg.org/image/hiixhonoh/
HTML
<div id="content">
<div class="container" id="{postID}">
<div class="container-overlay"></div>
<div class="photo inner">
<a href="{permalink}">
<img src="{block:indexpage}{PhotoURL-500}{/block:indexpage}{block:permalinkpage}{PhotoURL-HighRes}{/block:permalinkpage}" alt="{PhotoAlt}">
</a>
</div>
</div>
<nav id="pagination">
<ul>
{block:PreviousPage}<li>Previous page</li>{/block:PreviousPage}
{block:NextPage}<li><a id="nextPage" href="{NextPage}">Next page</a></li>{/block:NextPage}
</ul>
</nav>
</div>
CSS
#content{
margin: 0 auto;
position: relative;
}
.container{
margin-bottom: 14px;
}
.container-overlay{
width: 100%;
height: 100%;
opacity: 0;
position:absolute;
}
.icons{
opacity: 0;
position: absolute;
left: 50%;
top: 50%;
width: 100%;
text-align: center;
}
#pagination{
display: none;
position: absolute;
}
It's hard to tell what you want without a demo, but there is space at the bottom because your .container div has margin-bottom: 14px;.
Example Fiddle

Categories