Develop Reference

Spacing between navbar and first section

When I start to scroll down, the section home moves down and in between is a weird space which I don't know how to get rid of.
Any tips on how to fix this problem?
//header Effekt beim scrollen
$(function() {
var shrinkHeader = 100;
$(window).scroll(function() {
var scroll = getCurrentScroll();
if (scroll >= shrinkHeader) {
$('#navbar').addClass('shrink');
} else {
$('#navbar').removeClass('shrink');
}
});
function getCurrentScroll() {
return window.pageYOffset || document.documentElement.scrollTop;
}
});
// JavaScript Document
$(document).ready(function() {
var navTop = $('#navbar').offset().top;
var navHeight = $('#navbar').height();
var windowH = $(window).height();
$('.section').height(windowH);
$(document).scroll(function() {
var st = $(this).scrollTop();
//for the nav bar:
if (st > navTop) {
$('#navbar').addClass('fix');
$('.section:eq(0)').css({
'margin-top': navHeight
}); //fix scrolling issue due to the fix nav bar
} else {
$('#navbar').removeClass('fix');
$('.section:eq(0)').css({
'margin-top': '0'
});
}
$('.section').each(function(index, element) {
if (st + navHeight > $(this).offset().top && st + navHeight <= $(this).offset().top + $(this).height()) {
$(this).addClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').addClass('active');
// or $('#nav li:eq('+index+')').addClass('active');
} else {
$(this).removeClass('active');
var id = $(this).attr('id');
$('a[href="#' + id + '"]').parent('li').removeClass('active');
//or $('#nav li:eq('+index+')').removeClass('active');
}
});
});
});
//
#charset "utf-8";
/* CSS Document */
* {
font-family: 'Roboto', sans-serif;
}
#container {
background-color: white;
width: 1280px;
height: 4000px;
margin-left: auto;
margin-right: auto;
}
body {
background-color: grey;
margin: 0px;
}
/* Navigation */
ul {
color: black;
list-style: none;
float: right;
margin-right: 20px;
padding-top: 32px;
}
ul li {
display: inline-table;
margin-left: 5px;
padding: 5px;
border-bottom: 1.5px solid;
border-bottom-color: white;
}
ul li a {
color: black;
text-decoration: none;
padding: 10px;
}
/* Smart Navbar / weiß wo man auf der Seite ist von https://stackoverflow.com/questions/19697696/change-underline-of-active-nav-by-section */
#navbar.fix {
position: fixed;
top: 0;
}
#navbar li.active {
border-bottom: 1.5px solid;
border-bottom-color: #f6bd60;
}
/* Smart Navbar Ende */
/* fixed Navigation von https://codepen.io/malZiiirA/pen/cbfED?css-preprocessor=none */
#navbar {
border-bottom-style: solid;
border-bottom-width: 1.25px;
box-shadow: 0px 2.5px 5px rgba(0, 0, 0, 0.2);
background-color: white;
height: 128px;
transition: 0.32s;
position: fixed;
width: 1280px;
}
#navbar.shrink {
height: 80px;
line-height: 18px;
}
#navbar li {
font-size: 18px;
font-weight: normal;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
#navbar.shrink li {
font-size: 18px;
margin-top: -30px;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
transition: all 0.3s;
}
/* fixed nav Ende */
#spacer {
height: 128px;
border-bottom: 4px solid;
}
#Home {
height: 1000px;
border-style: solid;
}
#UberUns {
height: 1000px;
border-style: solid;
}
#Aktionen {
height: 1000px;
border-style: solid;
}
#Terminvereinbarung {
height: 1000px;
border-style: solid;
}
#Infos {
height: 1000px;
border-style: solid;
}
/* Hover Effekt bei Navigation von https://github.com/IanLunn/Hover/blob/master/css/hover.css */
.hvr-sweep-to-top {
display: inline-block;
vertical-align: middle;
-webkit-transform: perspective(1px) translateZ(0);
transform: perspective(1px) translateZ(0);
box-shadow: 0 0 1px rgba(0, 0, 0, 0);
position: relative;
-webkit-transition-property: color;
transition-property: color;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
}
.hvr-sweep-to-top:before {
content: "";
position: absolute;
z-index: -1;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #f6bd60;
-webkit-transform: scaleY(0);
transform: scaleY(0);
-webkit-transform-origin: 50% 100%;
transform-origin: 50% 100%;
-webkit-transition-property: transform;
transition-property: transform;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
-webkit-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.hvr-sweep-to-top:hover,
.hvr-sweep-to-top:focus,
.hvr-sweep-to-top:active {
color: white;
}
.hvr-sweep-to-top:hover:before,
.hvr-sweep-to-top:focus:before,
.hvr-sweep-to-top:active:before {
-webkit-transform: scaleY(1);
transform: scaleY(1);
}
/* Hover Effekt Ende */
/* Loader */
.loader {
display: inline-block;
width: 30px;
height: 30px;
position: relative;
border: 4px solid #Fff;
animation: loader 2s infinite ease;
}
.loader-inner {
vertical-align: top;
display: inline-block;
width: 100%;
background-color: #fff;
animation: loader-inner 2s infinite ease-in;
}
#keyframes loader {
0% {
transform: rotate(0deg);
}
25% {
transform: rotate(180deg);
}
50% {
transform: rotate(180deg);
}
75% {
transform: rotate(360deg);
}
100% {
transform: rotate(360deg);
}
}
#keyframes loader-inner {
0% {
height: 0%;
}
25% {
height: 0%;
}
50% {
height: 100%;
}
75% {
height: 100%;
}
100% {
height: 0%;
}
}
.loader-wrapper {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background-color: #242f3f;
display: flex;
align-items: center;
justify-content: center;
}
/* loader Ende */
<!DOCTYPE html>
<html>
<head>
<title>OptikTack</title>
<link href="style.css" rel="stylesheet" type="text/css">
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
</head>
<body>
<div id="container">
<div class="body">
<div id="navbar">
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script src="javascript/navbar fixed.js"></script>
<ul>
<li class="hvr-sweep-to-top">Home</li>
<li class="hvr-sweep-to-top">Wir über uns</li>
<li class="hvr-sweep-to-top">Aktionen</li>
<li class="hvr-sweep-to-top">Terminvereinbarung</li>
<li class="hvr-sweep-to-top">Infos</li>
</ul>
</div>
<div id="spacer"></div>
<section id="Home" class="section">
<p>Home</p>
</section>
<section id="UberUns" class="section">
<p>section 2</p>
</section>
<section id="Aktionen" class="section">
<p>section 3</p>
</section>
<section id="Terminvereinbarung" class="section">
<p>section 4</p>
</section>
<section id="Infos" class="section">
<p>section 5</p>
</section>
</div>
</div>
<div class="loader-wrapper">
<span class="loader"><span class="loader-inner"></span></span>
</div>
<script>
$(window).on("load", function() {
$(".loader-wrapper").fadeOut("slow");
});
</script>
<script>
$('a').click(function() {
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
</script>
</body>
</html>

Something is creating a margin-top when you scroll down
try add:
#Home {
margin-top: 0 !important;
}

Looking at your code I found a couple of issues.
if(st > navTop ){
$('#navbar').addClass('fix');
$('.section:eq(0)').css({'margin-top':navHeight});//fix scrolling issue due to the fix nav bar
}
st is defined to be the current scrolling position of your browser.
This is in your scrolling code, meaning as soon as st is bigger than navTop, it will set margin-top to navHeight. But the issue is that a little bit up you defined navTop as followed: var navTop = $('#navbar').offset().top;
navTop is always 0. Meaning that whenever you scroll any amount it will add the margin-top. I'd start there with finding your problem.
Andrea's solution is but a solution for a problem that you introduced yourself.

try add:
#Home {
margin-top: 0 !important;
}

jquery side navigation not smooth on mobile devices

I am having a problem with my side nav i made with Jquery it works fine on a laptop or a desktop but on mobile device the transition is not smooth like in the desktops or laptops I don’t know what is causing the problem
if you wondering i did the side nav by toggling a class which takes the position of the side nav from left:-30%; to 30%

I really wanted to show you the difference in performance. Check out my demo. Click a box to see it move. Even on my new MacBook Air, I can tell the difference. On mobile, as you noticed, the difference is much more pronounced.
$(".box").on("click", function() {
$(this).addClass("start");
})
$(".reset").on("click", function() {
$(".box").removeClass("start");
})
#keyframes moveWithLeft {
from {
left: 0;
}
to {
left: calc(100vw - var(--box-width));
}
}
#keyframes moveWithTransform {
to {
transform: translate(calc(100vw - var(--box-width)));
}
}
.box {
--box-width: 80px;
--box-height: 70px;
width: var(--box-width);
height: var(--box-height);
line-height: var(--box-height);
background-color: rgba(0, 128, 0, 1);
position: absolute;
color: white;
display: inline-block;
cursor: pointer;
font-family: helvetica;
transition: 0.3s background-color ease-in-out;
}
.box:hover {
background-color: rgba(0, 128, 0, .8);
}
.box span {
text-align: center;
display: block;
font-size: 85%;
}
.box.two {
top: calc(var(--box-height) + 5px);
}
.one.start {
animation: 3s moveWithLeft forwards;
}
.two.start {
animation: 3s moveWithTransform forwards;
}
button {
position: fixed;
bottom: 0;
left: 0;
font-size: 1.2rem;
font-family: helvetica;
padding: 10px;
border: none;
}
html, body {
margin: 0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="box one"><span>Left</span></div>
<div class="box two"><span>Transform</span></div>
<button class="reset">Reset</button>
jsFiddle

.parentDiv {
transition: 300ms all;
}

JavaScript/jQuery - Delay Loading Page When Clicking Hyperlinks at Mobile Resolution

I'm using a CSS hover effect that I found on Codrops in my web portfolio's work page. At mobile resolutions, the elements' animation is activated by clicking the hyperlinked image, but the transition doesn't always have time to complete before loading the next page.
Is there a way to utilize JavaScript/jQuery to delay the loading of a page/website at mobile resolutions?
Update:
I've combined Yaseen Ahmed's solution below with a jQuery-based StackOverflow solution that I finally ran across for a perfect solution to my problems.
$(document).ready(function() {
$('.delay').click(function(e) {
if (window.innerWidth < 768) {
e.preventDefault();
var $a = $(this).addClass('clicked');
setTimeout(function() {
window.location.assign($a.attr('href'));
}, 2500);
} else {
window.location.assign($a.attr('href'));
}
});
});
section {
width: 600px;
height: 400px;
}
figure {
cursor: pointer;
}
figure.apollo {
position: relative;
float: left;
overflow: hidden;
width: 100%;
background: #c3589e;
}
figure.apollo img {
position: relative;
display: block;
height: auto;
width: 100%;
opacity: 0.8;
}
figure.apollo figcaption {
padding: 2rem;
backface-visibility: hidden;
}
figure.apollo figcaption::before,
figure.apollo figcaption::after {
pointer-events: none;
}
figure.apollo figcaption,
figure.apollo figcaption>a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: none;
}
figure.apollo figcaption>a {
z-index: 5;
white-space: nowrap;
span {
opacity: 0;
}
}
figure.apollo img {
opacity: 0.95;
transition: opacity 0.35s, transform 0.35s;
transform: scale3d(1.1, 1.1, 1);
}
figure.apollo figcaption::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.5);
content: '';
transition: transform 0.6s;
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, -100%, 0);
}
figure.apollo figcaption p span {
margin: .25rem 0;
padding: 0 .5rem;
display: inline-block;
background-color: #ffffff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
}
figure.apollo:hover img {
opacity: 0.6;
transform: scale3d(1, 1, 1);
}
figure.apollo:hover figcaption::before {
transform: scale3d(2.2, 1.4, 1) rotate3d(0, 0, 1, 45deg) translate3d(0, 100%, 0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<section>
<p>Make sure you shrink your viewport width to less than 768px before testing the link delay.</p>
<figure class="apollo">
<img src="https://www.tylerfuller.me/assets/images/sakura.jpg" alt="Cherry Blossoms" />
<figcaption>
<p><span>This is a link to the</span><br />
<span>pure CSS Sakura</span><br />
<span>theme / framework.</span></p>
<a class="delay" href="https://oxal.org/projects/sakura/"></a>
</figcaption>
</figure>
</section>
</body>

All you need to create the java script function in your project see in code.
your hyper link
java script function
function loadpage() {
if (window.innerWidth < 768) {
setTimeout(function(){
location.href="your_url";
}, 1000);
} else {
location.href="your_url";
}
}
What will this function do when your screen width is less then 768 it will load url after one second and if grater then it will load url without delay.
Note : When you resize the screen width must reload the page.

Simple menubar effect

How can I make this more smooth?
$(window).bind('scroll', function () {
if ($(window).scrollTop() > 80) {
$('.menu').addClass('fixed');
} else {
$('.menu').removeClass('fixed');
}
});
I would like an effect, where .menu gets filled with a color starting from the top.
I tried with css3 styling.
.fixed {
position: fixed;
background-color: #fff;
width: 100%;
transition: all .5s ease-in;
box-shadow: 0px 2px 10px 0px #424242;
}

Hiding a text when a sections width is set to 0

so I've had a bit of a problem with trying to make a section's width to 0 and have everything inside the object do the same thing. Essentially hide the section and everything inside it. Thing is, the section will change to a width of 0px but the text inside still displays and also sort of pushes off to the side. Is there any way that I can use either css or javascript to hide the text and bring it back when the sections width changes back over?
Code pasted into jsfiddle:
http://jsfiddle.net/t6ck9ajb/
$(document).ready(function(){
$("#about").click(function(){
if ($("#about-me").css("width") <= "0vw") {
$("#introduction").animate({width:"0vw"}, 500);
/*$("#intro").css("display","none");
$("#port").css("display","none");
$("#about").css("display","none"); */
}
else {
$("#introduction").animate({width:"0vw"});
}
});
});
This is what I have to attempt at hiding the text, but this didn't really hide it.

Here is a different approach:
$(function(){
$('#about').on('click', homeAboutToggle);
$('#home').on('click', homeAboutToggle);
});
function homeAboutToggle(){
$('#introduction').toggleClass('active');
$('#about-me').toggleClass('active');
}
* {
margin: 0px 0px;
padding: 0px 0px;
font-family: "Open Sans";
}
#container{
width: 100vw;
height: 100vh;
overflow:hidden;
position:relative;
}
.full-page {
width: 100vw;
height: 100vh;
background-color: #5085aa;
position: absolute;
float: left;
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
}
.full-page.right{
transform: translateX(100vw);
-webkit-transform: translateX(100vw);
}
.full-page.left{
transform: translateX(-100vw);
-webkit-transform: translateX(-100vw);
}
.full-page.active{
transition:all ease-in-out 400ms;
-webkit-transition:all ease-in-out 400ms;
transform: translateX(0);
-webkit-transform: translateX(0);
}
#introduction {
z-index: 1;
}
#about-me {
z-index: 0;
}
#information {
text-align: center;
}
#intro {
font-size: 4vw;
color: white;
text-align: center;
padding-top: 30vh;
}
#port{
position: absolute;
right: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#home,
#about{
position: absolute;
left: 3vw;
bottom: 5vh;
color: white;
font-size: 1.5vw;
text-decoration: none;
font-weight: bold;
}
#about:active #about-me {
width: 100vw;
}
.big {
font-size: 8vw;
color: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="container">
<section class="full-page right" id="about-me">
<h1 id="information">About Me</h1>
<a id="home">Back home</a>
</section>
<section class="full-page left active" id="introduction">
<h1 id="intro">Hello, my name is<br/><span class="big">Michael!</span> </h1>
<a id="port">Portfolio</a>
<a id="about">About Me</a>
</section>
</div>
</body>

If you're wanting to hide the content when the '#about' selector is clicked, why not just use $('#introduction').toggle()?

This a CSS issue. You need to add overflow: hidden; to whatever you want to be hidden with a change of width, in this case #intro.

Here a working fiddle with the intended animation: fiddle
CSS:
#introduction {
z-index: 1;
visibility:"visible";
overflow:hidden;
}
jQuery
$(document).ready(function () {
$("#about").click(function () {
if ($("#about-me").css("width") <= "0px") {
$("#introduction").animate({
width: "0px"
}, 500, function () {
$("#introduction").css("visibility", "hidden");
})
} else {
$("#introduction").animate({
width: "0px"
});
}
});
});