Bootstrap Snippet Header change on scroll using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://fonts.googleapis.com/css?family=Roboto:400,500,700" rel="stylesheet">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!--[if IE]> <link href="~/Content/NewHomePage/all-ie-only.css" rel="stylesheet" /> <![endif]-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<!--header-start-->
<div class="header" id="navbar">
    <div class="container">
        <div class="logo">
            <a href="index1.html"><img src="images/logo-invert.png"/></a>
        </div>
        <div class="navigation">
            <ul>
                <li class="nav-home"><a href="">Home</a></li>
                <li class="nav-about"><a href="">About</a></li>
                <li><a href="">Services</a></li>
                <li><a href="">Contact</a></li>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.header/*{padding:10px 0px;background:#282e3c;}*/{ padding: 10px 16px;background:#143ca1;color:#000;font-weight:400;font-size:16px;}/*position: fixed;z-index: 9;width: 100%;top: 0;}postion fixed without stricy postion:fixed start*/
/* The sticky class is added to the navbar with JS when it reaches its scroll position */
.darkHeader{
height: auto; 
background-color:#000 ;
position: fixed;
top:0;
width: 100%;
z-index:99;
}
.darkHeader a{color:#2ec4b6 !important;}
/*stricy content end*/
ul {margin: 0;padding: 0;}
.content {padding: 16px;}
.container{width:1170px;margin:0 auto;}
.sticky {position: fixed;top: 0;width: 100%}
.sticky + .content{padding-top: 102px;}
.logo{width:20%;float:left;}
.navigation{float:right;}
.navigation ul li{list-style:none;display:inline-block;margin-right:20px;margin-top:10px;}
.navigation ul li a{color:#fff;}
.navigation ul li a:hover{text-decoration:none;}
.nav-home:after{border-top: 2px solid #9f4f5c;display: block;width:45px;content: "";margin: 8px auto 0;}
/*welcome to Travel*/
.w3l_header {font-size: 3em;color: #262c38;letter-spacing: 1px;position: relative;font-weight: 600;text-align: center;}
.welcome-to-travel{margin-bottom:50px;}
.wthree_head_section p {font-size: 15px;text-align: center;margin: 20px auto;width: 60%;color: #5e5e5e;line-height: 1.8em;}
.w3l_header:after {border-top: 2px solid #9f4f5c;display: block;width: 81px;content: "";margin: 8px auto 0;}
.about-grid1 {background: url(https://bestjquery.com/tutorial/product-grid/demo9/images/img-2.jpg) no-repeat center;background-size: cover;min-height: 450px;border: 1px solid #d6d6d6;}
.about-grid2 {padding: 0em 0 0 4em;}
.about-subgrid p {color: #000;text-transform:capitalize;font-size: 1.8em;font-weight: bold;font-style: italic;margin: 0;}
.about-subgrid h2 {font-size: 2.2em;text-transform: uppercase;color: #000;margin: 0.5em 0;display: inline-block;border-right: 5px double #9f4f5c;padding-right: 10px;}
.about-subgrid span {color: #000;font-weight: 800;font-size: 1em;padding-left: 27px;letter-spacing: 1px;text-transform: uppercase;}
.about-subgrid h5 {color: #000;font-size: 1.5em;text-transform: capitalize;margin: 1em 0;border: 2px solid #9f4f5c;display: inline-block;padding: 5px 10px;width: 50%;}
ul.w3l-about-list {padding: 0em 0 0 2em;}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
$( function() {
    $( ".depart_date" ).datepicker({ numberOfMonths: 2, minDate: 0 });
    $( ".return_date" ).datepicker({ numberOfMonths: 2, minDate: 0 });
  });
  
$(window).scroll(function() {    
    var scroll = $(window).scrollTop();
    if (scroll >= 2) {
        $(".header").addClass("darkHeader");
    } else {
        $(".header").removeClass("darkHeader");
    }
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Header change on scroll"
Bootstrap 4.1.1 Snippet by imsachin

Related: See More

Questions / Comments:

"Header change on scroll" Bootstrap 4.1.1 Snippet by imsachin

Related: See More

Questions / Comments:

"Header change on scroll"
Bootstrap 4.1.1 Snippet by imsachin