fixed header to container not working when scrolling down

fixed header to container not working when scrolling down - javascript

I am new to javascript so please bear with me. I had a container with slides in it and has a header with a red background color and I added some javascript and CSS to make the header stick to the top when I scroll down but the function is not sticking the header when I scroll down. I can't figure out where I went wrong. My current code is attached below. Any help is appreciated. Thanks in advance.
.Con1 {
height: 50%;
width: 70%;
}
.slideWrap {
position: absolute;
top: 10%;
width: 95%;
}
.ConHeader {
background-color: red;
width: 100%;
height: 10%;
z-index: 1;
}
.fixed {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
.Scroll {
background-color: grey;
position: absolute;
height: 100%;
right: 1%;
z-index: 1;
}
<html>
<head>
<link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
<script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</head>
<body>
<div class="swiper-container Con1">
<div class="ConHeader" id="ConHeader"></div>
<div class="swiper-wrapper slideWrap">
<div class="swiper-slide Slide1">
</div>
<div class="swiper-slide Slide2">
</div>
<div class="swiper-slide Slide3">
</div>
</div>
<!-- Add Scrollbar -->
<div class="swiper-scrollbar Scroll"></div>
</div>
<script>
var swiper = new Swiper('.Con1', {
direction: 'vertical',
slidesPerView: 1,
spaceBetween: 10,
scrollbar: {
el: '.Scroll',
hide: true,
},
mousewheel: {
invert: false,
forceToAxis: true,
},
});
</script>
<script>
$(window).scroll(function() {
var sticky = $('.ConHeader'),
scroll = $(window).scrollTop();
if (scroll >= 100) sticky.addClass('fixed');
else sticky.removeClass('fixed');
});
</script>
</body>
</html>

Related

How to posititon text in a slick slider and ensure it does not move around

I'm currently trying to overlay text over the image in my slick slider, however even though I have overlaid the text when I resize the window the text seems to move around in the image. How do I fix this? Is there a different way to overlay text over an image in an image carousel? please do advise, my code pen is also linked below
This is my codepen
https://codepen.io/rahil8533/pen/OJzpzxo
HTML code
<html>
<head>
<title>Slick Playground</title>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.css"/>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.7.1/slick-theme.css">
</head>
<body>
<section class="regular slider">
<div>
<img src="https://s26.postimg.cc/7ayxq3q5l/cg5.jpg">
<div class="content">
<h2>Covid 19 measures on campus</h2>
</div>
</div>
<div>
<img src="https://s26.postimg.cc/zccz3svft/cg6.jpg">
<div class="content">
<h2>2Covid 19 measures on campus</h2>
</div>
</div>
<div>
<img src="https://s26.postimg.cc/7g2ozrxgp/cg4.jpg">
<div class="content">
<h2>3Covid 19 measures on campus</h2>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery.slick/1.6.0/slick.min.js"></script>
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false
});
});
</script>
</body>
</html>
CSS code
html, body {
margin: 0;
padding: 0;
}
.slider {
width: 50%;
margin: 0px auto;
}
.slick-slide {
position: relative;
margin: 0px 0px;
}
.slick-slide img {
width: 100%;
}
.slick-prev:before,
.slick-next:before {
color: black;
}
.slick-dots li button:before {
font-size: 10px; !important
}
.slick-prev,
.slick-next {
left: 0;
right: 0;
}
.content{
position: absolute;
width: 100%;
height: 100%;
top: 5px;
left: 0;
line-height: 100vh;
text-align: center;
z-index: 99;
}```

The issue is that the height of your h2 textbox follows the height of the window. Add the setting adaptiveHeight: false to your slick code as well as the following css and js updates.
You must update your h2 and .content with the following css styles:
.content {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
line-height: 1;
z-index: 99;
}
h2 {
position: relative;
display: flex;
text-align: center;
align-items: center;
margin: 0;
justify-content: center;
}
Update your JavaScript to the following:
<script type="text/javascript">
$(document).on('ready', function() {
$(".regular").slick({
dots: true,
infinite: true,
slidesToShow: 1,
slidesToScroll: 1,
autoplay: true,
arrows: false,
adaptiveHeight: false
}).on("setPosition", function (event, slick) {
$(".content > h2").css("height", slick.$slides.height() + "px");
});
});
</script>
The codepen can be found here.

Change the content in the CSS to :
.content {
position: relative;
width: 100%;
height: 100%;
top: -190px;
left: 5;
text-align: center;
z-index: 99;
margin-bottom:-65px
}
The relative position will change position on resize accordingly. The margin-bottom makes sure the dots are also in place.

Slick Slider 2 sliders not matching slides and Slider inside Bootstrap Modal

As you can see I have 2 slick sliders running in this page, One is seen by default and the second one is triggered in a bootstrap modal when user click one of the slides of the first one. This is to see the slide individually and in bigger size . My use case is simply this and I am super close to completing: When user click any of the slide of the slider, a modal should pop up with slick slider with a 1 slideToShow option instead of 3 so the image is bigger, the slide that show on the Modal should be the same the one user clicked.
Issues.
1. When page is refreshed and user click one of the slide, the modal slider opens to with a buggy view, once i start clicking the next and previous arrow , this goes away, why is this happening?
see the bugg view:
2. How do i show the same slide the user clicker on the modal also, right now modal slider opens like a new slider and the first slide is shown all the time not the one user clicked
.stack-list-slider-slider-area {
margin-top: 30px;
}
.stack-list-slider-slider-area .stack-list-slider-slide h3 {
font-size: 15px;
text-align: center;
margin-top: 18px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow {
position: relative;
width: 30px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: 0px;
right: auto;
z-index: 11;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
.stack-list-slider-slider-area button.slick-prev.slick-arrow:after {
content: "<";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow {
position: relative;
width: 40px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: auto;
right: 0px;
z-index: 11;
top: 50%;
transform: translateY(-50%);
height: 40px;
}
.stack-list-slider-slider-area button.slick-next.slick-arrow:after {
content: ">";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
position: relative;
}
.stack-list-slider-slider-area .stack-list-slider-slide {
padding: 30px 0;
}
.stack-list-slider-slider-area .slider-img img {
display: block;
width: 100%;
}
.stack-list-slider-slider-area .slick-initialized .slick-slide {
padding: 0 15px !important;
}
.stack-list-slider-slider-area .stack-list-slider.slick-initialized.slick-slider {
padding: 0 40px;
}
.stack-list-slider-modal-slider-area {
margin-top: 30px;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide h3 {
font-size: 15px;
text-align: center;
margin-top: 18px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow {
position: relative;
width: 30px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: 0px;
right: auto;
z-index: 11;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-prev.slick-arrow:after {
content: "<";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow {
position: relative;
width: 40px;
overflow: hidden;
background: transparent;
border: 0;
position: absolute;
left: auto;
right: 0px;
z-index: 11;
top: 50%;
transform: translateY(-50%);
height: 40px;
}
.stack-list-slider-modal-slider-area button.slick-next.slick-arrow:after {
content: ">";
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: #00805f;
color: #fff;
display: flex;
align-items: center;
justify-content: center;
font-size: 22px;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
position: relative;
}
.stack-list-slider-modal-slider-area .stack-list-slider-modal-slide {
padding: 30px 0;
}
.stack-list-slider-modal-slider-area .slider-img img {
display: block;
width: 100%;
}
.stack-list-slider-modal-slider-area .slick-initialized .slick-slide {
padding: 0 15px !important;
}
.stack-list-slider-modal-slider-area .stack-list-modal-slider.slick-initialized.slick-slider {
padding: 0 40px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Practice Html page</title>
<!-- Slick Slider CSS CDN 3.3.1-->
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/slick-carousel#1.8.1/slick/slick.css" />
<!-- Bootstrap CSS CDN 3.3.1-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="style.css">
</head><!-- end head -->
<body>
<div class="stack-list-slider-slider-area">
<div class="container">
<div class="stack-list-slider">
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-slide" data-toggle="modal" data-target="#modalId">
<div class="slider-img">
<img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
</div> <!-- /.stack-list-slider -->
</div><!-- end container -->
</div><!-- end slider area -->
<!-- img gallary modal start -->
<div id="modalId" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<div class="stack-list-slider-modal-slider-area">
<div class="stack-list-modal-slider">
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/nnbizh3joq3l71n/1.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/9k753y33lfwnnnw/2.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/9dven42pc2o012j/3.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
<div class="stack-list-slider-modal-slide" >
<div class="slider-img">
<img src="https://www.dropbox.com/s/feqzlynvgryieh5/4.jpg?dl=1" alt="">
</div>
<h3>Product Name</h3>
</div> <!-- /.stack-list-slider-slide -->
</div> <!-- /.stack-list-slider -->
</div><!-- end slider area -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- img gallary modal ends -->
<!-- Loading Jquery 3.4.0 CDN -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<!-- Loading Jquery 3.4.0 CDN -->
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<!-- Loading Slick Slider CDN -->
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.9.0/slick.min.js"></script>
<script>
$(document).ready(function () {
$('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
$('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-slider",
});
});
</script>
</body>
</html>

add this section
$('#myModal').on('shown.bs.modal', function () {
//write your code here
});
full code
$(document).ready(function () {
$('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
});
$('#modalId').on('shown.bs.modal', function () {
$('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
asNavFor: ".stack-list-slider",
});
});
reference is here https://codepen.io/mhfuad/pen/yLNRagb
I think this is a solution for now

Getting the "data-slick-index" when clicking the first slide and using that to set the modal slider using "slickGoTo" fixed the slide matching issue. As far as the bug goes Multiple fixes were needed
1) use "unslick" when not using modal slider and trigger modal slider only when modal is modal is open(thanks to MH Fuad), the bug seems to be happening due to multiple sliders in one page. Here is my jquery
jQuery(document).ready(function () {
jQuery('.stack-list-slider').slick({
slidesToShow: 3,
slidesToScroll: 1,
autoplay: false,
arrows: true,
infinite: true,
asNavFor: ".stack-list-modal-slider",
responsive: [
{
breakpoint: 991,
settings: {
slidesToShow: 3,
}
},
{
breakpoint: 767,
settings: {
slidesToShow: 2,
}
},
{
breakpoint: 480,
settings: {
slidesToShow: 1,
}
},
]
});
});
var clickedSlick;
jQuery('.stack-list-slider-slide').each(function () {
jQuery(this).click(function (e) {
e.preventDefault();
var test =jQuery(this).closest('.slick-active').attr('data-slick-index');
console.log(test);
clickedSlick = test;
});
})
jQuery('.stack-list-slider .stack-list-modal-slider').removeClass('slick-active');
//set active class to first thumbnail slides
jQuery('.stack-list-slider .stack-list-modal-slider').eq(0).addClass('slick-active');
jQuery('#modalId').on('shown.bs.modal', function () {
jQuery('.stack-list-modal-slider').slick({
slidesToShow: 1,
slidesToScroll: 1,
autoplay: false,
arrows: true,
infinite: true,
asNavFor: ".stack-list-slider",
});
jQuery('.stack-list-modal-slider').slick('slickGoTo', clickedSlick);
});
jQuery("#modalId").on('hidden.bs.modal', function (e) {
jQuery('.stack-list-modal-slider').slick('unslick')
});

Making Swiper Slider's Transition Unidirectional

I have put together an image carousel with the help of Swiper.
My carousel uses background images, bullets and vertical transition. I want this vertical transition to be unidirectional. In other words, the carousel transition direction should be upwards, regardless of the succession of the bullets clicked.
var swiper = new Swiper('.swiper-container', {
direction: 'vertical',
auto: true,
speed: 1000,
loop: true,
autoplay: {
delay: 9000,
disableOnInteraction: false,
},
pagination: {
el: '.swiper-pagination',
clickable: true,
},
controller: {
inverse: true,
}
});
.swiper-container {
position: relative;
max-width: 1200px;
margin: 0 auto;
height: 265px;
}
.swiper-wrapper {
height: 265px;
}
.swiper-slide {
transition: 1s ease-in-out;
top: 0;
width: 100%;
height: 265px;
background-repeat: no-repeat;
background-position: center center;
}
.swiper-slide img {
margin: 0 auto;
width: 620px;
height: 265px;
}
.swiper-container-vertical>.swiper-pagination-bullets {
bottom: 0;
top: auto !important;
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet {
margin: 0 !important;
outline: none;
opacity: 1;
float: left;
width: 18px;
height: 18px;
background: url("https://grgs.ro/1/i/sprite.png") no-repeat -528px -502px;
}
.swiper-container-vertical>.swiper-pagination-bullets .swiper-pagination-bullet.swiper-pagination-bullet-active {
background-position: -528px -524px;
}
<link href="https://necolas.github.io/normalize.css/8.0.0/normalize.css" rel="stylesheet"/>
<link href="https://idangero.us/swiper/dist/css/swiper.css" rel="stylesheet" />
<script src="https://idangero.us/swiper/dist/js/swiper.min.js"></script>
<div class="swiper-container">
<div class="swiper-wrapper">
<a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=east');">
<img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
</a>
<a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=south');">
<img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
</a>
<a href="#" class="swiper-slide" style="background-image: url('https://picsum.photos/1200/265/?gravity=west');">
<img src="https://5.grgs.ro/images/b/c2/303073784cd9d0ee3aea0e039629ce5b.png" alt="">
</a>
</div>
<!-- Add Pagination -->
<div class="swiper-pagination"></div>
</div>
I have been looking for information on the Swiper website, including the forum but could not find the way to make it unidirectional. How could I do that?

Maybe this will help you, pass the parameter allowSlidePrev: false;.
I have never used Swiper but and I have no way to test so i don't know if this will solve your bullets problem but in theory this will make it unidirectional .

"Layered" slider using slick.js

I'm trying to implement a "layered" slider using slick.js.
enter image description here
I found a solution on stackoverflow but still having some problems. There (jsfiddle link) what i have right now.
The problem is that the right and left slides are cut off. I've tried to increase padding using centerPadding but it didn't work.
Maybe someone had the same problem?
I would be grateful for any advice!
$('.slider').slick({
arrows: true,
centerMode: true,
infinite: true,
centerPadding: '250px',
slidesToShow: 1,
speed: 500,
dots: false,
});
.wrapper {
width: 1170px;
background: pink;
}
.content {
width: 975px;
margin: auto;
}
.slick-slide:not(.slick-center) {
z-index: 0;
transform: scale(0.7);
}
.slick-active.slick-center+.slick-slide+.slick-slide {
z-index: 1;
}
.slick-active.slick-center+.slick-slide,
.slick-center+.slick-cloned {
z-index: 2;
}
.slick-center {
z-index: 3;
}
.slick-slide {
position: relative;
transition: transform 80ms;
}
.slider__item img {
position: relative;
transform: translateX(-50%);
left: 50%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<div class="wrapper">
<div class="content">
<div class="slider">
<div class="slider__item">
<img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" />
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" />
</div>
<div class="slider__item">
<img src="https://pp.userapi.com/c834100/v834100491/58296/G8F9vgI_pr4.jpg" />
</div>
</div>
</div>
</div>

Div Element act like a background

how can I make a <div> element act like a background like the intro of this web jabarprov.go.id?
This is my codepen
http://codepen.io/anon/pen/RGEmxB
$(document).ready(function(){
$(window).bind('scroll', function() {
var navHeight = $( window ).height() - 70;
if ($(window).scrollTop() > navHeight) {
$('nav').addClass('fixed');
}
else {
$('nav').removeClass('fixed');
}
});
});
#div1, #div2{
height:100vh;
}
#div1{background-color:cyan}
#div2{background-color:lightgrey}
nav {
position: absolute;
bottom: 0;
width: 100%;
background: Green;
padding:2px 0;
z-index:1;
}
.fixed {
position: fixed;
top: 0;
height: 70px;
z-index: 1;
}
section {
height: 100vh;
}
/* Screens Settings */
#screen1 {
background: #43b29d;
}
#screen1 p {
padding-top: 200px;
}
#screen2 {
background: #efc94d;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div id="div1" class="col-md-3">LEFT SECTION</div>
<div id="div2" class="col-md-9">RIGHT SECTION</div>
<nav class="main-bg">
<div class="container">
NAVIGATION HERE
</div>
</nav>
<section id="screen2"></section>
<section id="screen3"></section>
The problem is the intro my page is not fixed (acts like fixed background).

I modified your code.
Hope it is what you searched for
http://codepen.io/anon/pen/qaLGrp
I made a wrapper around div1 and 2 which is fixed and made change to sizes
wrapper
<div id="intro-wrapper">
<div id="div1" class="col-md-3">a</div>
<div id="div2" class="col-md-9">b</div>
</div>
wrapper css and sizes
body{
padding-top: 100vh;
}
#intro-wrapper{
z-index: -1;
position: fixed;
top: 0;
width: 100vw;
}
#div1, #div2{
height:calc(100vh - 70px);
}
navigation position
nav {
position: absolute;
top: calc(100vh - 70px);
width: 100%;
background: Green;
padding:2px 0;
z-index:1;
height:70px;
}

We Keep Coding

JavaScript is the programming language of the Web.

fixed header to container not working when scrolling down - javascript

Related

How to posititon text in a slick slider and ensure it does not move around

Slick Slider 2 sliders not matching slides and Slider inside Bootstrap Modal

Making Swiper Slider's Transition Unidirectional

"Layered" slider using slick.js

Div Element act like a background

Categories

Resources