Scroll then fix to top header in html - javascript

So, i'd like to have an header working similarly to the one here http://www.blackmesasource.com/ , the only problem being I know nothing about javascript and jquery, can anyone help me?

Nice - I just knocked this up for you - it's rough and has had no cross-browser testing:
<style type="text/css">
body {
padding:0;
margin:0;
}
#hero {
background-color:#eee;
}
nav {
position:absolute;
bottom:0;
left:0;
background-color:#ccc;
box-sizing:border-box;
width:100%;
padding:20px;
}
nav.fixed-position {
position:fixed;
top:0;
bottom:initial;
}
</style>
<body>
<div>
<div id="hero">
<nav id="nav-menu">
Your nav here
</nav>
</div>
<section style="height:2000px;">
content
</section>
</div>
<script type="text/javascript">
var hero = document.getElementById('hero'),
nav = document.getElementById("nav-menu"),
viewportHeight = Math.max(window.innerHeight || 0),
navOffsetTop = nav.offsetTop;
hero.style.height = viewportHeight + 'px';
var hasScrolled = function() {
var fromTop = document.body.scrollTop || document.documentElement.scrollTop || 0;
if (navOffsetTop < fromTop) {
nav.classList.add('fixed-position');
} else {
nav.classList.remove('fixed-position');
}
}
window.addEventListener('scroll', hasScrolled);
</script>
</body>
You can drop this into an empty file and run it in your browser to see the result - I tested it in Firefox with no problems but as I say, it will need additional work; such as:
Crossbrowser - depending on what level of IE support you plan to have, classList might not work.
Optimisation - currently the hasScrolled function fires every time the user scrolls, you might want to find a way to limit that.
Global vars - I've made no attempt to use a nice clean namespace for the JS, something else you might like to look into.
Additionally, this doesn't require jQuery, but given what I've just suggested you need to do you might want to look into using it - it's mainly crossbrowser which will help you out alot if you don't really know JS.

You can see best resources here. Just follow same structure https://css-tricks.com/scroll-fix-content/

Related

ADD/REMOVE class based on div/section change with JQuery

I have a fixed image and I need to animate it based on div/section changes
<div class="fixed">
<img src="some_image.jpg" class="child-fixed">
</div>
<section class="section" id="section-1">
//this is rotating section
</section>
<section class="section" id="section-2">
//this is flip section
</section>
and CSS something looks like this,
.fixed{
position:fixed;
margin:50% auto;
width:50px;
height:50px;
}
.fixed-child{
width:100%;
height:100%;
margin:0;
padding:0;
}
.section{
height:100vh;
width:100vw;
}
.rotate{
//some css totate styles here
}
.flip{
//some css flip styles here
}
and JQuery Code will be like this,
$(document).ready(function(){
$(window).scroll(function(){
if ($(window).scrollTop() > 100){
$('.fixed-child').addClass( "rotate");
}elseif($(window).scrollTop() > 200){
$('.fixed-child').addClass( "flip");
}
});
});
Now I need to add rotate class when that image on section-1 and remove rotate class and add flip class when on section-2 with jquery,
I searched for that, I found some examples but using those examples I can add/remove class based on jquery scrollTop() method, but I want jquery detect that class and add corresponding classes when I scroll down and scroll up vice-versa.
I didn't write rotate and flip CSS code to reduce lines here. but those flip and rotate works.
Please help me to achieve this style!
From what I can gather from your question / comments you need something like Waypoints
Waypoints is the easiest way to trigger a function when you scroll to
an element.
I would also use waypoints for something like this, but as an alternative you can try doing something like:
$( document ).ready(function() {
var section_1 = $('#section-1'),
section_2 = $('#section-2');
$(window).scroll(function() {
var scroll_lvl = $(document).scrollTop(),
section_1_lvl = section_1.offset().top,
section_2_lvl = section_2.offset().top;
if(scroll_lvl >= section_1_lvl && scroll_lvl < section_2_lvl) {
$('.fixed-child').addClass( "rotate");
$('.fixed-child').removeClass( "flip");
} else if (scroll_lvl > section_1_lvl && scroll_lvl >= section_2_lvl) {
$('.fixed-child').addClass( "flip");
$('.fixed-child').removeClass( "rotate");
}
});
});

How do I make a div (menu) fixed positioned after some scrolling has happened?

I'm making a theme for a website and I was given permission to play with the HTML files. The thing is I'm just familiarised with CSS and HTML, but I'm a complete noob when it comes to Javascript, JQuery, etc. and, sadly, it seems I need those to add some features I want.
I'd like a menu that works like this one: https://www.planetside2.com/news
The HTML is basically this:
<div id="wrap">
<div id="page-header">
<div class="headerbar">
</div>
</div>
And plenty stuff inside, but I hope the containers are enough
This is the CSS:
#wrap {
margin: 0 auto;
width: 1024px;
}
.headerbar {
background: url("{T_THEME_PATH}/images/headerbarbg.png") no-repeat ;
background-position: center;
width: 1054px;
margin:0 -15px;
margin-top:3px;
height: 120px;
position: relative;
padding-top: 70px;
}
I've checked out some other solutions, but, as I said, I'm a complete noob at scripting and when I try to apply such scripts to the theme, they don't work, most likely because there are some things that I should change that I don't know (except classes and IDs, of course).
I hope someone can help me.
First of all you need to detect scrolling and window resize
$(document).ready(function(){
$(window).on("scroll resize", function(e){
var elem = $(".headerbar");
// check if your header is visible by subtracting
// the top offset of your div from the scrolltop distance
if ((elem.offset().top - $(window).scrollTop()) <= 0 && elem.css("position") !== "fixed") {
console.log("not visible");
elem.css({
position:"fixed",
"z-index":"9999",
top:"0px"
});
// check if your header height is greater or equal to the scrolltop distance
} else if (elem.height() >= $(window).scrollTop()) {
console.log("visible");
elem.css({
position:"relative"
});
}
});
})
And here is a simple demo: JSFIDDLE
Some thing i have done previously in fiddle just check this one out will help you to have a scratch.
$(document).ready(function () {
var top_fixed;
if ($('#header-con').length > 0)
{
top_fixed = $('#header-con').offset().top;
}
$(window).scroll(function () {
if ($('#header-con').length > 0)
{
$('#header-con').toggleClass('fixed', $(window).scrollTop() > top_fixed);
}
});
});
DEMO
This short jquery code is what you need.
Tested and was working in a website i had develop lately.
$(window).scroll(function() {
if($(window).scrollTop() != 0) {
$('#fixed-menu-top').css('position', 'fixed').fadeIn();
} else {
$('#fixed-menu-top').css('position', 'absolute').fadeOut();
}
});
Just edit the ids to yours ex #fixed-menu-top to #wrap or any ids in ypur mark up
See website

Menu Bar, which is not at the top, but once you slide down the menu bar sticks to the top

I need to make a menu bar like the one in
http://showbic.com/sports/adam-milne-vs-west-indies/
In this website the menu_bar is not on the top, but when you scroll down the menu bar doesn't go up with the rest of the content, but after touching the top it stays at the top.
I know some JavaScript is used combined with the CSS, but how I don't know, please someone help me.
Thank You in Advance.
I would advise trying something with onscroll in Javascript and then keeping the header at the top you can use position:fixed; in the container's CSS. (you might want to play around with the top placement or something else to keep it at the very top and in your preferred spot when not needed at the top)
See for example:
<script type="text/javascript">
var fixed = false;
onscroll = function()
{
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
if (scrollTop > 200)
{
if (!fixed)
{
$('.navbar-wrapper').css({ position: 'fixed', top : 0 });
fixed = true;
}
}
else
{
if (fixed)
{
$('.navbar-wrapper').css({ position: 'relative', top : 200 });
fixed = false;
}
}
}
</script>
When looking into the source code, you can view the javascript part that is controlling this bar. http://showbic.com/wp-content/plugins/seo-alrp/js/slidebox.js?ver=3.8.
Instead of :
$('#alrp-slidebox').animate({'right':'0px'},300);
Put:
$('#yourContent').animate({'top':'0px'},300);
And for (we suppose that the height of the box is 300px):
$('#alrp-slidebox').stop(true).animate({'right':'-430px'},100);
Put:
$('#yourContent').stop(true).animate({'top':'-300px'},100);
This can be your css
body{
height:1000px;
}
div{
width:200px;
height:100px;
background:red;
position:relative;
top:200px;
}
.fixedClass{
position:fixed;
top:0;
}
the jquery code
$(window).scroll(function(){
if($(window).scrollTop() > 200){ // position of menu from the top
$('div').addClass('fixedClass');
}
else{
$('div').removeClass('fixedClass');
}
})
the Html :P
<div>
</div>
the working fiddle

Scrolling/fixed sidebar gets cut off when sidebar is very long

I have a small jQuery script to keep the sidebar visible when you scroll down the browser. However, the sidebar can get very long since it will contain filters (dropdowns and checkboxes) so the bottom part gets cut-off.
I'd like to have an effect like on this website:
http://www.lyst.com/
In a way, when the sidebar is long, you are still able to scroll up and down. It will only become fixed when it reaches the bottom/top of the sidebar.
Does anybody know where I can get a script that does this exactly?
Set your CSS and HTML markup in a fashion that you can easy reference the objects you want to avoid collision with. Create conditional statements to compare said references.
Firstly, the working jsFiddle.
The HTML ->
<div class="content">
<div class="main">
Main Content
</div>
<div class="sidebar">
Sidebar
</div>
<div class="footer">
Footer
</div>
</div>
The CSS ->
#content{
position:relative; /* required */
height:2000px;
}
.main{
margin-left:100px;
border:1px solid rgb(120,120,120);
height:1500px;
}
.sidebar{
position:absolute; /* required */
top:25px; /* required -- does NOT need to be this value, however. */
left:5px; /* required -- does NOT need to be this value, however.*/
border:1px solid rgb(8,8,8);
background:rgba(70,70,70,.9);
color:#ecebeb;
width:93px;
}
.footer{
border-top:1px solid #ff0000;
height:498px;
}
The jQuery ->
$(window).scroll(function(){
var dist = $(window).scrollTop();
var sTop = $('.sidebar').position().top;
var mHeight = $('.main').height();
var userDist = 100;
if((sTop > (mHeight - userDist)) && (dist > (mHeight - userDist))){
//the sidebar is pinned now. it won't scroll further.
}else if(dist < (mHeight - userDist)){
$('.sidebar').animate({
top: dist + $('.sidebar').height()
}, 0);
}
});

Liquid Layout IE Problems, of course (Newbie)

I'm new to CSS, never created a layout before and I'm having some issues with my first one in Internet Explorer. I think it looks good in Firefox though.
I have done a lot of reading about HTML and CSS before starting the layout so I knew IE had some bugs but even after making the layout and researching the issues none of the resolutions seem to be working. Im hoping someone here can help.
TL;DR: New layout not working in IE, need help(did research)
Problem 1: In IE the 2 right sidebars are too wide compared to Firefox. Everything else appears normal, just those 2 are too wide which is affecting the layout
Problem 2: When the window width is below 1024 it is supposed to switch from container1.css to container2.css effectively changing the container properties to better display in smaller resolutions. Works great in Firefox, but in IE it seems to remove the container period leaving the contents to flow throughout the entire window.
<HTML>
<HEAD>
<TITLE>My Liquid Layout</TITLE>
<link rel="stylesheet" type="text/css" href="LiquidLayout.css" />
<link id="container1" rel="stylesheet" type="text/css" href="container1.css" />
<link id="container2" rel="alternate" type="text/css" href="container2.css" />
<script type="text/javascript">
<!--
var css = "container1";
function changeStyle(styleSheet)
{
if(styleSheet == css)
return;
var selected = document.getElementById(styleSheet);
var current = document.getElementById(css);
if(!selected)
{
selected = current.cloneNode(true);
selected.id=styleSheet;
selected.setAttribute("href",current.getAttribute("href").replace(new
RegExp(css),styleSheet));
}
current.setAttribute("rel","stylesheet1");
selected.setAttribute("rel","stylesheet");
document.getElementsByTagName('head')[0].appendChild(selected);
css = styleSheet;
}
function windowSize()
{
var windowWidth;
var windowHeight;
windowWidth = window.innerWidth;
windowHeight = window.innerHeight;
if (document.body && document.body.offsetWidth)
{
windowWidth = document.body.offsetWidth;
windowHeight = document.body.offsetHeight;
}
if (document.compatMode=='CSS1Compat' &&
document.documentElement &&
document.documentElement.offsetWidth )
{
windowWidth = document.documentElement.offsetWidth;
windowHeight = document.documentElement.offsetHeight;
}
if (window.innerWidth && window.innerHeight)
{
windowWidth = window.innerWidth;
windowHeight= window.innerHeight;
}
if(windowWidth < 1024)
changeStyle('container2');
else if(windowWidth >= 1024)
changeStyle('container1');
}
window.onresize = new Function("windowSize()");
//-->
</script>
</HEAD>
<BODY>
<div id = "container">
<div id = "header"><p id = "size"></p></div>
<div id = "content">
<div id = "menu">
<ul>
<li>About</li>
<li>Contact</li>
<li>Home</li>
<li>Video</li>
<li>Gallery</li>
<li>IGN</li>
</ul>
</div>
<div id = "sidebox"></div>
<div class = "column" id = "sidebar"></div>
<div class = "column" id = "main"></div>
</div>
<div id = "footer"></div>
</div>
</BODY>
</HTML>
The main CSS is:
body
{
background-color:gray;
margin: 0px;
text-align: center;
}
#header
{
width: 100%;
height: 200px;
background-color: yellow;
}
#content
{
padding-top:5px;
padding-bottom:0px;
padding-right:5px;
padding-left:5px;
min-height: 768px;
}
#menu
{
width: 66%;
height: 250px;
background-color: blue;
float: left;
}
#sidebox
{
width: 34%;
height: 250px;
background-color: red;
float: right;
display: inline;
}
#sidebar
{
width: 34%;
background-color: red;
height: 100%;
float: right;
}
#main
{
width: 65%;
height: 100%;
background-color: green;
float: left;
}
If anyone can please offer some advice on fixing these issues in IE I would appreciate it!
Any suggestions for improvement are welcome as well
You didn't specify which version of IE, so I'm guessing you've only checked the most recent version?
Add a doctype as suggested, and you should be ok in IE9, but if you're supporting other versions of IE as well you are going to want some way of targeting each version independently as they all have different and progressively worse bugs. Occasionally, something will work in IE7 but not IE8, but generally as you head towards IE6 your problems will multiply exponentially, especially with a liquid layout.
I'd recommend using Modernizr, which will add different class names to the HTML element depending on the version of IE in use. It also does a bunch of other stuff like making HTML5 elements styleable in older IE as well, so it is worth using, even without any of the other feature tests it offers. I can see you aren't using any HTML5 elements, but I don't know if that's your whole layout, or just the beginnings of it...
You'll probably also want to use Selectivizr so that most useful CSS3 features can be used in IE8 and below as well, although you need to use a JS library, such as jQuery for this, so it may or may not be useful. There isn't any CSS3 in your CSS, but again, your example could be much simplified
In terms of improvements to your code, you don't need to include HTML comments in your script tags <!-- and haven't since the days of like IE4 or something. Additionally, your should go at the bottom of the <body> (just before the closing </body>) for performance reasons, rather than in the <head>, and if you use the HTML5 doctype (which you can still use even if you aren't planning on using any HTML5 elements) you don't need to specify a type attribute on the <script> element. In JavaScript, the opening curly brackets should go on the same line as the function definition or conditional, so do:
if (condition) {
or:
function something() {
and not:
if (condition)
{
or:
function something()
{
This is usually ok most of the time, but it can produce bugs that are very hard to spot, so it is worth getting into the habit of doing it all the time. And when attaching an event listener, you don't need to specify new Function("function_name"), you can just attach the function directly:
window.onresize = windowSize();
Also, in CSS, zero values do not need to specify measurement units, so you can just have 0 instead of 0px...
If you have copy and pasted the entirity then your missing a doctype making IE render in quirksmode.
I would suggest adding the HTML5 doctype to the top of your document <!DOCTYPE html>
More information on quirks mode can be found here

Categories