Navbar issue with sticky position - javascript

window.onscroll= function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
<header id="home">
<nav id="navbar">
<div class="row flex">
<img src="img/logo.png" class="logo" alt="logo">
<ul>
<li>home</li>
<li>service</li>
<li>team</li>
<li>skill</li>
<li>portfolio</li>
<li>review</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="row">
<div class="hero-text-box">
<h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
work with us!
</div>
</div>
</header>
Hello there, I am new to web development,after learning css and html I am doing some practice projects through youtube. That guy used a jquery plugIn that is not working correcting now. I have googled and saw some youtube videos but no help there,it is important to know that I am a beginner in javascript, so I cannot do much with js part. Right now I am using the js code from w3school but it serves half of my demand. The issue is with navbar. I want to blend the navbar with the homepage but as soon as I scroll and reach certain point like other sections it will stick on the top.

You will have to specify at what position you want to stick that bar. Position: Sticky works with some position where you want to stick that navbar. For Example:
position: sticky;
top: 3rem;
change your css from:
.sticky {
position: fixed;
top: 0;
}
to
.sticky {
position: sticky;
top: 0;
}
Refer to this link: https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_sticky_element
Try providing the top where you want to stick the bar while scrolling.
try with below code:
<!DOCTYPE HTML>
<html>
<style>
.sticky{
position: sticky;
top: 0;
}
</style>
<header id="home1">
<nav id="navbar" class="sticky">
<div class="row flex">
<img src="img/logo.png" class="logo" alt="logo">
<ul>
<li>home</li>
<li>service</li>
<li>team</li>
<li>skill</li>
<li>portfolio</li>
<li>review</li>
<li>contact</li>
</ul>
</div>
</nav>
<div class="row">
<div class="hero-text-box">
<h1>Hi there! We are the new kids on the block and we build awesome websites and mobile apps.</h1>
work with us!
</div>
</div>
</header>
</html>

Related

Hide loader while navigating between webpages

I have a index.html with a preloader to it. My index.html file is linked 2 more webpages a.html and b.html through a tags. But when i click on link which redirects the user to these webpages and come back to index.html, the preloader again starts animating for x seconds. How can i stop this from happening. I mean i want my preloader only to show up when first opening the site and not when coming back to index.html while navigating.
HTML:
<div class="load"></div>
<div id="wrapper" onload="myFunction()">
<!--navbar starts-->
<nav id="navbar" >
<h3>PORTFOLIO</h3>
<ul id="list">
<li>HOME</li>
<li>SKILLS</li>
<li>PROJECTS</li>
<li>CONTACT</li>
</ul>
</nav>
</nav>
<!--navbar ends-->
<!--Main content-->
<div id="main">
<div id="cover-details">
<h3>Hallo</h3>
<h1 id="main-heading">This is abc!</h1>
<h2 id="profession">Im a Web developer.</h2>
<p id="college-intro">
Competitive coder | Computer Science |
</p>
</div>
</div>
<!--Main content ends-->
</div>
CSS:
.load{
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url(https://media.giphy.com/media/WvuTFk2IN7jxoLVDkP/giphy.gif) center no-repeat #fff;
}
JS:
$(window).load(function() {
setTimeout(function(){ $('.load').fadeOut('slow'); }, 5000);
})
You could use local storage to save a value after visiting a page and only display the animation if no value is set.
For example:
const visited = localStorage.getItem("visited");
if (!visited) {
localStorage.setItem("visited", "true");
$(window).load(function() {
setTimeout(function(){ $('.load').fadeOut('slow'); }, 5000);
})
}

Get particles.js on the correct layer?

I can't make particles.js work as a background. It covers the entire page, I've tried setting a higher z-index (50) for everything I want to cover particles.js with. Here's the particles codepen. The codepen has no background, therefor the particles are not visible.
The code below is what I'm trying to set as background for <section id="services">.
<!-- particles.js container -->
<div id="particles-js"></div>
<!-- stats - count particles -->
<!-- particles.js lib - https://github.com/VincentGarreau/particles.js -->
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<!-- stats.js lib --> <script src="http://threejs.org/examples/js/libs/stats.min.js"></script>
The problem is that it covers everything inside <section> as well, not sure why.
The code you're about to see is nothing but a butchered ole' bootstrap template. Never intended to make any real use of it in the first place, hence the confusing amount of style attributes.
<section id="services" style="padding:10px;background-color:black;">
<!-- Here's where I thought fitting it would cause it to work as a background -->
<div class="container" style="padding-top:10px;margin-top:10px;">
<div class="row text-center" style="margin-left:auto;margin-right:auto;">
<div style="margin-left:auto;margin-right:auto;max-width:720px;width:100%;">
<button id="reload" onclick="return returnGame();clearDescr();">
<div class="notspinning" id="theSpinner"></div>
</button>
<span id="findMe">
<a href="" id="steamLink" style="color:#333" target="_blank">
<h4 class="service-heading" id="gameName" style="font-family:Montserrat,'Helvetica Neue',Helvetica,Arial,sans-serif;text-transform:uppercase;font-weight: 700;font-size: 22px;color:#777;"></h4>
</a>
</span>
<p class="text-muted" id="gameDescr" style="min-height:100px;font-family:MyWebFont;"></p>
</div>
</div>
</div>
</section>
Any sort of guidance just in the right direction would be much appreciated.
have you tried setting an element as the background, e.g. position: fixed; top:0; right: 0; bottom: 0; left: 0; z-index: 0 and then another div for your content position: relative?
e.g. http://codepen.io/alexander-holman/pen/rebroK
In its simplest form your markup would look like:
<style>
#particle {
background-color: #b61924;
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:0;
}
#overlay {
position:relative;
}
</style>
<div id="particle"></div>
<div id="overylay">[Your content here]</div>
<script src="http://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
<script>
var options = {};
particlesJS("particle", options);
</script>

jQuery plugin slick is not working

I downloaded the jQuery files to create image sliders for my Website, but it's not working at all. Can somebody teach me which codes I have problems? thank you..
<body>
<ul class="slider" "position: relative; top: 0px; left: 0px; width: 600px;
height: 300px;">
<li><div class="slick"><img src="./images/sample-01.png"></div></li>
<li><div class=""><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
<li> <div class="slick"><img src="./images/sample-01.png" /></div>
<li> <div class="slick"><img src="./images/sample-02.png" /></div></li>
<li><div class="slick"><img src="./images/sample-03.png" /></div></li>
</ul>
<script type="text/javascript" src="jquery-1.12.0.min.js"></script>
<script src="jquery-migrate-1.2.1.min.js"></script>
<script src="slick.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($){
var_slideshowTransitions = [
{$Duration:1200,$Opacity:2}
];
var options={
$SlideDuration:500,
$AutoPlay:true,
$DragOrientation:3,
$Idle:1500,
$slideshowOptions: {
$Class:$JssorslideshowRunner$,
$Transitions:_slideshowTransitions,
$TransitionsOrder:1,
$ShowLink: true
}
};
var slider= new $Slider$("slider", options);
});
</script>
First off, your HTML is poorly structured and invalid. You didn't close your 4th <li> element, also, in the <ul> element, you have to use the style attribute to apply styles inline. In your case, like this: <ul class="slider" style="position: relative; top: 0px; left: 0px; width: 600px;height: 300px;">.
I have no idea where you got that Javascript code from but the slickJS documentation is pretty simple to follow.
My code below implements a slideshow which you can copy, paste and modify, if you like. Look into the docs. You can set or change a ton of options to help get your slider to do what you want. Also, make sure you are importing everything in the correct order. jQuery -> slickjs -> custom Javascript. Make sure the slick CSS is linked in the head.
$(document).ready(function (){
$('.slider').slick({
dots:true,
infinite: true,
slidesToShow: 3,
slidesToScroll: 1
});
});
/*
modify the slider container with your own custom CSS
to have it fit or placed in your page how you want.
*/
.slider {
width:70%;
margin:0 auto;
}
/*
I put divs inside that can have their padding modified
so the images aren't directly up against each other.
Feel free to play with this CSS to desired affect.
*/
.slide-image-container {
padding:2%;
}
/*
This CSS forces the inner images to size to the parent (slide) container
*/
.slide-image-container img {
width:100%;
}
<link href="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.css" rel="stylesheet"/>
<link href="http://kenwheeler.github.io/slick/slick/slick-theme.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
<div>
<div class="slide-image-container"><img src="https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg"/></div>
</div>
</div>
<script src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script>

Truouble implementing two smooth scrolling effects

I am making a webpage that is continuous scrolling. However I am unable to make it scroll smoothly
My html code is:
<nav class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- Logo -->
<a class="brand" href="index1.html">MAPPLAS</a>
<ul class="nav">
<li>Inicio</li>
<li>Portfolio</li>
<li>Equipo</li>
<li>Blog</li>
<li>Contacto</li>
</ul>
</div><!-- end .container -->
</div><!-- end .navbar-inner -->
</nav> <!-- end .navbar -->
My function is as follows:
((function() {
$('ul.nav a').bind('click',function(event){
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top
}, 1500);
event.preventDefault();
});
});
})();
I think there is a problem because I have another function which creates a buttom back-to-top, that function is as follows:
((function() {
$('<i id="back-to-top"></i>').appendTo($('body'));
$(window).scroll(function() {
if($(this).scrollTop() != 0) {
$('#back-to-top').fadeIn();
} else {
$('#back-to-top').fadeOut();
}
});
$('#back-to-top').click(function() {
$('body,html').animate({scrollTop:0},600);
});
})();
The thing is that one is working smoothly ( the back to top ) but the other is not. I am not an expert on js and I have tried including completely separated js scripts but nothing solves the problem.
Anyone has an idea why is not working??Thank u!
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>Smooth Scrolling</title>
<style type="text/css">
.container{
width:300px;
margin:0 auto;
}
.section{
margin-top:60px;
}
.navigation{
position: fixed;
background:white;
padding:20px 20px;
width:100%;
margin-top:0px;
top:0px;
}
</style>
</head>
<body>
<div class="container">
<div class="navigation">
HTML
JavaScript
jQuery
PHP
CSS
</div>
<div class="section">
<h1 id="html">HTML</h1>
<p>
put your text about html here
</p>
</div>
<div class="section">
<h1 id="javascript">JavaScript</h1>
<p>
put your javascript details here.
</p>
</div>
<div class="section">
<h1 id="jquery">jQuery</h1>
<p>
Put your details about javascript here
</p>
</div>
<div class="section">
<h1 id="php">PHP</h1>
<p>
put your details about php here
</p>
</div>
<div class="section">
<h1 id="css">CSS</h1>
<p>put your details </p>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('a[href^="#"]').click(function(event) {
var id = $(this).attr("href");
var offset = 60;
var target = $(id).offset().top - offset;
$('html, body').animate({scrollTop:target}, 3000);
event.preventDefault();
});
});
</script>
</body>
</html>

How can I fix the bootstrap navbar to the top after a div was scrolled?

I am trying to get my navbar with bootstrap to appear after a certain div, called "A". Div "a" is at the top of by page, and has a height of around 400px. Once the user scrolls past the div "a" and the scrollbar, I want the scroll bar to stick to the top. Similar to something like this: https://www.facebook.com/home but I don't have a video at the top, it is an image.
Can we do that we bootstrap itself?
Thanks!
If you'd like to achieve this using Twitter's Bootstrap check out the 'Affix' js. You define the "fixed" point using the "data-offset-top" and then the navbar will become fixed to the top when user scrolls down.
CSS:
#con .well {
height:390px;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%
}
HTML:
<div class="container" data-spy="affix" data-offset-top="400" id="nav">
<div id="nav" class="navbar">
<div class="navbar-inner"> ...
Javascript:
$('#nav').affix();
Here is the working fiddle:
http://jsfiddle.net/skelly/df8tb/
Here's a working example (updated for Bootstrap 3): http://bootply.com/90936
To get the effect show on facebook.com/home your navbar position should be set to static (or relative / absolute) until the user scrolls past 400px and then you need to set it's position to fixed so that is stays at the top of the screen. This can be done with a little javascript.
This answer is no longer correct. Please see #zim's answer below.
please just follow this. you will not see the snap thing when the menu bar reached the top position.
<!DOCTYPE html>
<html>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
position: relative;
}
.affix {
top:0;
width: 100%;
z-index: 9999 !important;
}
.navbar {
margin-bottom: 0px;
}
.affix ~ .container-fluid {
position: relative;
top: 50px;
}
#section1 {padding-top:50px;height:500px;color: #fff; background-color: #1E88E5;}
#section2 {padding-top:50px;height:500px;color: #fff; background-color: #673ab7;}
#section3 {padding-top:50px;height:500px;color: #fff; background-color: #ff9800;}
#section41 {padding-top:50px;height:500px;color: #fff; background-color: #00bcd4;}
#section42 {padding-top:50px;height:500px;color: #fff; background-color: #009688;}
</style>
</head>
<body data-spy="scroll" data-target=".navbar" data-offset="50">
<div class="container-fluid" style="background-color:#F44336;color:#fff;height:200px;">
<h1>Scrollspy & Affix Example</h1>
<h3>Fixed navbar on scroll</h3>
<p>Scroll this page to see how the navbar behaves with data-spy="affix" and data-spy="scrollspy".</p>
<p>The navbar is attached to the top of the page after you have scrolled a specified amount of pixels, and the links in the navbar are automatically updated based on scroll position.</p>
</div>
<nav class="navbar navbar-inverse" data-spy="affix" data-offset-top="197">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">WebSiteName</a>
</div>
<div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Section 1</li>
<li>Section 2</li>
<li>Section 3</li>
<li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Section 4 <span class="caret"></span></a>
<ul class="dropdown-menu">
<li>Section 4-1</li>
<li>Section 4-2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div id="section1" class="container-fluid">
<h1>Section 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section2" class="container-fluid">
<h1>Section 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section3" class="container-fluid">
<h1>Section 3</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section41" class="container-fluid">
<h1>Section 4 Submenu 1</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
<div id="section42" class="container-fluid">
<h1>Section 4 Submenu 2</h1>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
<p>Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!</p>
</div>
</body>
</html>
reference:
https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_scrollspy_affix&stacked=h

Categories

Resources