Sticky section header

Developer
Hai Nguyen
Size
2,528 Kb
Views
4,048
  1. Sticky section header Previews
  2. Sticky section header HTML Codes
  3. Sticky section header CSS Codes
  4. Sticky section header JS Codes

How do I make an sticky section header?

There is a design patter on several mobile devices where on a list, the header of the current section sticks to the top until the next section comes up, at which point it is nudged out of the way and the new header sticks to the top. Here this is replicated with HTML, JQuery & CSS. NOTE: WORKS BEST ON TOUCHSCREEN. What is a sticky section header? How do you make a sticky section header? This script and codes were developed by Hai Nguyen on 29 January 2023, Sunday.

Sticky section header Previews
IQ Test

Sticky section header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Sticky section header</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p class="title top" id="1">January</p>
<p class="content">content</p>
<p class="title" id="2">February</p>
<p class="content">bunch of stuff</p>
<p class="title" id="3">March</p>
<p class="content">bunch of stuff</p>
<p class="title" id="4">April</p>
<p class="content">bunch of stuff</p>
<p class="title" id="5">May</p>
<p class="content">bunch of stuff</p>
<p class="title" id="6">June</p>
<p class="content">stuff</p>
<p class="title" id="7">July</p>
<p class="content">bunch of stuff</p>
<p class="title" id="8">August</p>
<p class="content">bunch of stuff</p>
<p class="title" id="9">September</p>
<p class="content">bunch of stuff</p>
<p class="title" id="10">October</p>
<p class="content">bunch of stuff</p>
<p class="title" id="11">November</p>
<p class="content">bunch of stuff</p>
<p class="title" id="12">December</p>
<p class="content">bunch of stuff</p> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Sticky section header - Script Codes CSS Codes

p, body, html{ padding:0px; margin:0px
}
.title { width:100%; height:25px; font-size:20px; background-color:#aaa; border-bottom:1px solid #333; text-align:center; color: #333; font-weight:bold; font-family: "century Gothic", sans-serif; text-transform:uppercase; text-shadow:0px 1px 0px #ddd; box-shadow: 0px 1px 3px #333; background-image: -webkit-linear-gradient(bottom, rgb(135,135,135) 0%, rgb(232,232,232) 100%);
}
.title.top { position:fixed; top:0; left:0;
}
.title.top + .content{ padding-top:30px; }
.content { width:96%; background-color:#ccc; height:100px; padding:2%}

Sticky section header - Script Codes JS Codes

var currentPrior = 0;
var currentTop = 1;
var currentNext = 2;
$(window).scroll(function () { var position = $("#" + currentNext).offset().top - $(window).scrollTop(); var topHeight = $("#" + currentTop).height(); var size = topHeight + $("#" + currentTop).next().height(); var moving = -topHeight + position + "px"; if (position > topHeight){ $("#" + currentTop).css("top",""); } if (position < topHeight) { $("#" + currentTop).css("top", moving); if (position < 0) { $("#" + currentTop).removeClass("top"); $(".content").css("top", ""); $("#" + currentNext).addClass("top"); currentPrior++; currentNext++; currentTop++; } } if (position > size) { $("#" + currentTop).removeClass("top"); $("#" + currentPrior).addClass("top"); currentPrior--; currentNext--; currentTop--; }
});
Sticky section header - Script Codes
Sticky section header - Script Codes
Home Page Home
Developer Hai Nguyen
Username HaiNguyen007
Uploaded January 29, 2023
Rating 3
Size 2,528 Kb
Views 4,048
Do you need developer help for Sticky section header?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Hai Nguyen (HaiNguyen007) Script Codes
Name
Ribbons with Dynamic Text
A Pen by Hai Nguyen
Sticky notes with CSS3
How to Create a Paper Sticky Note Using Only CSS3
Css-sticky-notes
CSS Ribbon Headings
Creating Different CSS3 Box Shadows Effects
Fixed Header Shadow
Create a stunning menu in CSS3
Sticky footer without fixed height
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!