Jquery Scroll test

Developer
Alex Rodrigues
Size
3,879 Kb
Views
28,336
  1. Jquery Scroll test Previews
  2. Jquery Scroll test HTML Codes
  3. Jquery Scroll test CSS Codes
  4. Jquery Scroll test JS Codes

How do I make an jquery scroll test?

What is a jquery scroll test? How do you make a jquery scroll test? This script and codes were developed by Alex Rodrigues on 13 August 2022, Saturday.

Jquery Scroll test Previews
IQ Test

Jquery Scroll test - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Jquery Scroll test </title> <script src="http://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="header"> <ul> <li class="logo">12</li> <li>Link 1</li> <li>Link 2</li> <li>Link 3</li> <li>Link 4</li> </ul> </div>
<div class="content"> <h1>Jquery Scroll Tests</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolorem eligendi eius reprehenderit, nostrum fugit repudiandae aut, harum libero ullam voluptates molestias possimus, laudantium eos quaerat nemo molestiae architecto facere obcaecati.</p></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>

Jquery Scroll test - Script Codes CSS Codes

@import url(http://fonts.googleapis.com/css?family=Droid+Serif:400,400italic|Montserrat:400,700);
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline;
}
html { line-height: 1;
}
ol, ul { list-style: none;
}
table { border-collapse: collapse; border-spacing: 0;
}
caption, th, td { text-align: left; font-weight: normal; vertical-align: middle;
}
q, blockquote { quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none;
}
a img { border: none;
}
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block;
}
* { box-sizing: border-box;
}
body { font-family: "Montserrat", sans-serif; -webkit-font-smoothing: antialiased; font-size: 18px; margin-top: 5em; color: #333;
}
p { font-size: 1em; line-height: 2; width: 75%; margin: 0 auto; padding: 1em 0; font-family: "Droid Serif", serif;
}
.header { position: fixed; width: 100%; z-index: 9999; top: 0; background: #fff; box-shadow: 0px 0px 0px -5px #b3b3b3; -webkit-transition: all 0.5s linear; -moz-transition: all 0.5s linear; -ms-transition: all 0.5s linear; -o-transition: all 0.5s linear; transition: all 0.5s linear;
}
.header.smaller { font-size: 85%; box-shadow: 0px 0px 25px -5px #333;
}
.header ul { text-align: right; padding: 0 3% 0 0;
}
.header ul li { display: inline-block; line-height: 4em; padding: 0 2em; cursor: pointer; -webkit-transition: all 0.25s ease-in-out; -moz-transition: all 0.25s ease-in-out; -ms-transition: all 0.25s ease-in-out; -o-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out;
}
.header ul li.logo { float: left; background: #000; color: #fff; font-weight: bold; letter-spacing: -1pt; border-radius: 100%; padding: 1em; line-height: 1; margin: .5em;
}
.header ul li:hover { background: #6DCFF6; color: #fff;
}
.content { display: block; width: 75%; margin: 0 auto; height: 1400px;
}
.content h1 { font-size: 3em; font-weight: bold; letter-spacing: -.015em; padding: 1em 0; text-align: center;
}

Jquery Scroll test - Script Codes JS Codes

 $(function(){ var scroll = 0; $(window).scroll(function(event){ var moved = $(this).scrollTop(); if (moved > scroll){ $('.header').addClass('smaller') $('.header').css('background', 'white'); } if (moved === 0) { $('.header').removeClass('smaller') } if (moved > scroll){ //on UP scroll event } scroll = moved; }); });
Jquery Scroll test - Script Codes
Jquery Scroll test - Script Codes
Home Page Home
Developer Alex Rodrigues
Username alex_rodrigues
Uploaded August 13, 2022
Rating 4.5
Size 3,879 Kb
Views 28,336
Do you need developer help for Jquery Scroll test?

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!

Alex Rodrigues (alex_rodrigues) Script Codes
Name
SA_testing
Animated Bar Graphs
Front End Age Gate
Learning FlexBox
WIP - Checkout Flow Steps Progress mobile concept
Responsive Table-less Shopping Cart
Animate delay Sass Mixin
Transition Demo
A Pen by alex rodrigues
Toying With Flexslider
Create amazing web 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!