Continuous scrolling background of sticky header

Developer
Robert Borghesi
Size
5,109 Kb
Views
36,432
  1. Continuous scrolling background of sticky header Previews
  2. Continuous scrolling background of sticky header HTML Codes
  3. Continuous scrolling background of sticky header CSS Codes
  4. Continuous scrolling background of sticky header JS Codes

How do I make an continuous scrolling background of sticky header?

Fixed the header after scrolling and move the background until the end of the document. WATCH FULLSCREEN FOR BETTER EXPERIENCE. What is a continuous scrolling background of sticky header? How do you make a continuous scrolling background of sticky header? This script and codes were developed by Robert Borghesi on 27 August 2022, Saturday.

Continuous scrolling background of sticky header Previews
IQ Test

Continuous scrolling background of sticky header - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Continuous scrolling background of sticky header</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- WATCH FULLSCREEN FOR A BETTER EXEPRIENCE-->
<div class="header-photo"> <div class="article"> <div class="title">Riding High</div> <div class="subtitle">What’s a Rascal Rodeo? Think Special Olympics in dirt<br><span>TIP FROM ME: watch fullscreen</span></div> </div>
</div>
<div class="container-text"> <div class="intro">Ann-Erica Whitemarsh wanted to be a cowgirl. Growing up in Pasco, Washington, not far from the Oregon and Idaho borders, she hoped to follow in the bootsteps of her older brother, who made it to the national steer-wrestling finals for high school students.</div> <div class="plain-text"> <p>She tagged along to those finals, and in the process heard about a number of different events that occurred alongside steer-wrestling, one of which in particular piqued her interest. Even more rewarding than riding and roping, it seemed to Whitemash, was the so-called “exceptional rodeo,” for people with special needs</p> <p>Think Special Olympics in dirt. Dozens of kids and adults with various mental and physical disabilities rode ponies and participated in rodeo-like events. They roped wooden steer, ran around with stick horses, and sat on barrels that rocked back and forth like bulls. Whitemarsh could not help but be inspired by the stories.In 2001, when it was time to do her high school senior project, Whitemash decided to organize an exceptional rodeo in Pasco. It was a success. She went off to college for business and spent a few more years working in a cubicle, but she couldn’t shake the feeling that what she really wanted to do was organize exceptional rodeos.</p> <p>Whitemarsh lassoed her dream in 2011, incorporating the nonprofit Rascal Rodeo to produce rodeos for people with special needs. The first RR was held at the Kennewick (Washington) Fair, with thirty participants. The following year, RR produced four events (two each in Washington and Oregon) and seven in 2013, and is on pace to do at least twelve this year, expanding into Idaho.</p> <p>Rascal Rodeos take place on the same day and at the same location as professional rodeo events. Whitemarsh arranges for her group’s equipment to be set up either in the arena or just outside it, and the Rascal Rodeos usually start at 10 a.m. and run about an hour and a half.</p> <p>Each event draws participants from nearby communities, who register online or by phone. They have ranged in age from 2 to 70, and no disability is excluded. RR has had participants with autism, Down syndrome, schizophrenia, and other mental challenges; some of the wheelchair participants are disabled as the result of accidents.</p> <p>She also loves doing it so she can show parents of special needs kids that their children can do things they never imagined possible. The parents, she says, are often wary to get involved due to their experience with their kids’ limitations, and many need convincing just to show up.</p> <p>But here’s how it usually goes: “After a couple of minutes their child wants to see everything and touch everything, and then they really warm up and want to ride a horse,” Whitemarsh says, “and by that time the parents are crying.”</p> <p>At other times, it’s the kids themselves who need some persuading. That was the case with Jacob, whose mother, Laurie Sarver, brought him to his first Rascal Rodeo at the Kennewick County Fair three years ago, when he was six. It was crowded and loud, and Jacob, who has high-functioning autism, was overwhelmed.</p> Text + photo from <a href="https://medium.com/storytelling-for-good/riding-high-d5cd442ce318">Medium</a> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Continuous scrolling background of sticky header - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700,400italic);
@import url(http://fonts.googleapis.com/css?family=Noto+Serif:400italic);
body { font-family: 'Lato', sans-serif; position: relative;
}
.header-photo { width: 100%; height: 100%; position: relative; text-align: center; background: url("https://d262ilb51hltx0.cloudfront.net/max/1600/1*tUIJ2H14wOUGbMmrIUhn_Q.jpeg"); background-size: cover; background-position: 50% 0%;
}
.header-photo:after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 1; background-color: rgba(21, 21, 21, 0.6);
}
.container-text { max-width: 80%; width: 960px; margin: 0 auto; line-height: 1.5; font-size: 20px; text-align: center; margin-top: 60px;
}
.article { position: absolute; bottom: 120px; z-index: 2; color: white; width: 100%; padding-bottom: 20px;
}
.title { font-size: 80px; font-weight: 700; position: relative; color: white;
}
.subtitle { font-weight: 300; font-size: 22px; padding-top: 10px; color: rgba(255, 255, 255, 0.6);
}
.intro { font-style: italic; font-weight: 400; font-size: 22px; font-family: 'Noto Serif', serif;
}
.plain-text { padding: 0px 70px; text-align: left; font-weight: 300;
}

Continuous scrolling background of sticky header - Script Codes JS Codes

function fullheight(){ var vh =$(window).height(); $(".header-photo").css({"height": vh + "px"});
}
function scrolling(){ var postitle = $(".article").offset().top; var heighttitle = $(".article").height(); var plus = 20; var heighttitleplus = heighttitle + plus; var vh = $(window).height(); var scrolled; var marginscroll = 60 + heighttitleplus; $(window).scroll(function(){ scrolled = $(window).scrollTop(); if(scrolled >= postitle){ $(".article").css({ "position" : "fixed", "top": "0px", "bottom" : "auto" }); } else{ $(".article").css({ "position" : "absolute", "top": "auto", "bottom" : "120px" }); } if(scrolled >= (vh-heighttitleplus)){ $(".header-photo").css({ "position": "fixed", "top" : -(vh-heighttitleplus) + "px" }); $(".container-text").css({ "margin-top": (vh+60) + "px" }); } else{ $(".header-photo").css({ "position": "relative", "top" : "auto" }); $(".container-text").css({ "margin-top": (60) + "px" }); } });
}
function parallax(){ var docheight = $(document).height(); var scrolled; $(window).scroll(function(){ scrolled = $(window).scrollTop(); $(".header-photo").css({ "background-position" : "50% " + ((scrolled/docheight)*100) + "%" }); });
}
$(document).ready(function(){ fullheight(); scrolling(); parallax();
});
$(window).resize(function(){ fullheight(); scrolling(); parallax();
});
Continuous scrolling background of sticky header - Script Codes
Continuous scrolling background of sticky header - Script Codes
Home Page Home
Developer Robert Borghesi
Username dghez
Uploaded August 27, 2022
Rating 4.5
Size 5,109 Kb
Views 36,432
Do you need developer help for Continuous scrolling background of sticky 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!

Robert Borghesi (dghez) Script Codes
Name
Opening with auto typing responsive sentences with random background color loop
Pure custom css animation on new google logo
Hover otating cards folder of OnePiece characters
Opening animation from circular avatar
Best 3 players on fifa 14 - HOVER THEM
Gradient border on hover - Scorer of fifa world cup
Envato Remix Contest Challenge
Fullscreen slice hero slider
Text-mask background moving on MouseMove - v2
Continuous register clean form with autoresize input
Create amazing SEO content 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!