Develop Reference

How can i make my fixed header scroll away when a specific div hits it, or when it is 100px from the top

I can see lots of ways to do the opposite of what i am trying to achieve but noting for what I need.
I have a fixed header that is 100px tall. I want it to scroll away with the rest of the page when a specified div hits the header or it is 100px from the top of the screen.
I had was adding a scroll class to the header which was literally just making it position absolute, causing the header to jump of screen. I then translateY'd it back into view, this didn't work the same across all screen sizes.
My next idea is maybe keeping it fixed but adding a negative transformY to the header, dependent on scroll position. This would achieve the same effect I am going for but i'm not too sure how to achieve this.
If you need any more information then i am happy to provide it.
edit:
Here are some screen shots:
from the top of the page:
Then this is where i want the header to become un-fixed and scroll with the rest of the page:

Check out my solution. Hope this helps.
const headerEl = document.querySelector('header')
const targetEl = document.querySelector('#target')
const targetTopPos = targetEl.getBoundingClientRect().top
let isHeaderFixed = true
document.onscroll = () => {
const targetTopOffset = targetEl.getBoundingClientRect().top
if (isHeaderFixed && targetTopOffset < 100) {
headerEl.style.position = 'absolute'
headerEl.style.top = `${targetTopPos - 100}px`
isHeaderFixed = !isHeaderFixed
}
if (!isHeaderFixed && targetTopOffset >= 100) {
headerEl.style.position = 'fixed'
headerEl.style.top = '0px'
isHeaderFixed = !isHeaderFixed
}
}
body {
padding: 0;
margin: 0;
position: relative;
}
header {
position: fixed;
height: 100px;
width: 100%;
background: lightblue;
}
.content {
line-height: 100px;
}
.target {
width: 100%;
background: red;
}
<header>
Custom header
</header>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>
<div id="target" class="target">target</div>
<div class="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam suscipit tellus urna, ut tristique felis lobortis sed. Phasellus maximus at magna mattis vulputate. Pellentesque tempor, urna vitae congue pellentesque, est mauris faucibus nulla, vitae molestie leo purus a leo. Curabitur ut mi ac sem finibus consectetur a blandit massa. Morbi ornare tincidunt ipsum, et accumsan erat fringilla a. Cras egestas, nibh vel condimentum ultrices, nunc ipsum tempus magna, eu ullamcorper tortor magna id lacus. Morbi euismod lacus a ligula rutrum, in aliquet lectus blandit. Nam placerat sollicitudin lectus eu ornare. Etiam placerat diam eget magna blandit rutrum. Nulla et luctus massa. Sed sit amet mauris in magna tincidunt consequat. Proin mattis sit amet arcu a gravida. Nullam tempor urna nec dolor convallis consectetur sit amet a elit. Cras ut odio nec lacus efficitur porta nec sit amet justo.
</div>

I should by default make .header {position: absolute} and add this class to css (not to element yet):
.header.active {
position: fixed;
top: 0;
left: 0;
width: 100%;
}
Then understand when we need to carry this event on header. JS will help:
var targetElement = document.querySelector( YOUR TARGET ELEMENT ),
header = document.querySelector('.header');
window.onscroll = function(event){
if ( targetElement.offsetTop > window.pageYOffset ) {
header.classList.add('active');
} else {
header.classList.remove('active');
}
}
Target element is element which when you want to reach it, header will be fixed.
If you need

Viewheight on Chrome Mobile

I have a popup window, that is a div. It shouldn't go out of the screen, so I added an other div that is scrollable to facilitate the content if it's longer than the screen height. I can set the inner divs max-height in javascript like this (because I have content before it, so I don't know where it starts.):
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
This approach works on computers, but on smartphones in Chrome, the viewheight is more than what the user actually sees, because the url bar takes up space, so when that bar is shown, the end of the div is out of the screen. So how can I make the div end "15vh" from the actual bottom of the screen.
My code:
var container = document.getElementById("container");
var rect = container.getBoundingClientRect();
container.style.maxHeight = "calc(100vh - " + rect.top + "px - 15vh)";
body {
background-color: black;
}
#popup_content {
position: relative;
margin: auto;
background-color: red;
width: 80%;
max-width: 500px;
}
#container {
overflow: auto;
max-height: 50vh;
}
<div id="popup_content">
<p>some content</p>
<div id="container">
A lot of text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec tempus, est vel congue eleifend, ante tortor ultricies leo, eu consectetur magna odio ac nibh. Nulla laoreet odio dui, ac aliquet purus porttitor et. Aliquam blandit vestibulum mauris, vel eleifend diam ultrices in. Vivamus eget eleifend dui. Cras aliquet libero et lorem venenatis ultricies. Vestibulum pulvinar erat eget velit porta, a gravida nunc scelerisque. Aliquam ut varius nibh. Aenean volutpat imperdiet nibh quis vestibulum. Donec eget magna varius, tempus augue ac, auctor ipsum. Vivamus quis egestas mauris. Vivamus dapibus risus hendrerit viverra ullamcorper. Pellentesque sodales elementum leo, sit amet ultricies elit rhoncus eu. Phasellus consectetur sit amet sem at mattis. Aliquam finibus risus ut ante pharetra, ut condimentum ligula convallis. Maecenas hendrerit, ligula at finibus pellentesque, justo ante varius metus, a luctus libero dui ut risus. Pellentesque dictum, risus ut fermentum tincidunt, purus massa dictum lectus, id aliquam neque risus at augue. Phasellus laoreet fermentum elementum. Donec sit amet aliquam neque. In consequat nec augue aliquam congue. Suspendisse purus neque, luctus vel placerat sed, pellentesque eget neque. Morbi tincidunt iaculis neque in imperdiet. Donec id tortor nunc. In lacinia rhoncus lectus, vitae feugiat felis egestas at.
</div>
</div>

applying code to text lines instead of container div

I have the following code which scrolls the the content at different speeds
$.fn.moveIt = function() {
var $window = $(window);
var instances = [];
$(this).each(function() {
instances.push(new moveItItem($(this)));
});
window.onscroll = function() {
var scrollTop = $window.scrollTop();
instances.forEach(function(inst) {
inst.update(scrollTop);
});
}
}
var moveItItem = function(el) {
this.el = $(el);
this.speed = parseInt(this.el.attr('data-scroll-speed'));
};
moveItItem.prototype.update = function(scrollTop) {
this.el.css('transform', 'translateY(' + -(scrollTop / this.speed) + 'px)');
};
// Initialization
$(function() {
$('[data-scroll-speed]').moveIt();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h1 data-scroll-speed="3">text 1</h1>
<p data-scroll-speed="5">text 2 .... content covers multiple lines full parapgraph</div>
The code works to scroll each piece at a different 'speed,' but I want it to apply to each line in the content. (so each line in the content scrolls at a different speed)
EDIT: the content isn't hardcoded, its generated through the wordpress admin/user

I thought if each line is dynamically put into a different <span> would solve the problem. A nice start for you:
$("p").each(function(i) {
var pContent=$(this).text();
$(this).html("<span id='line"+i+"-0'><span>");
var lineID=0;
while (pContent.length>0) {
var firstSpace=pContent.indexOf(" ")+1;
if (firstSpace==-1) firstSpace=pContent.length;
var originalData=$("#temp-span").text();
$("#temp-span").append(pContent.substring(0,firstSpace));
if ($("#temp-span").width()>$(".container").width()) {
$("#line"+i+"-"+lineID).text(originalData);
$("#temp-span").text("");
$(this).append("<span id='line"+i+"-"+(++lineID)+"'></span>");
} else {
pContent=pContent.substring(firstSpace,pContent.length);
}
}
if ($("#temp-span").text().trim()!="") {
$("#line"+i+"-"+lineID).text($("#temp-span").text());
$("#temp-span").text("");
}
});
$("pre").text($(".container").html());
#temp-span {
width: auto;
white-space: nowrap;
display: none;
}
.container {
width: 100vw;
overflow: hidden;
position: absolute;
left: 0px;
top: 0px;
}
span {
display: block;
}
pre {
white-space: normal;
background-color: #8ff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis lacinia dui sit amet dapibus. Curabitur nec mi tellus. Nullam posuere auctor justo, vel ornare odio malesuada vitae. Sed ullamcorper libero sit amet est posuere, sed cursus metus tristique. Vestibulum varius erat at mi dapibus, quis scelerisque leo tempor. In auctor maximus tempus. Sed sed tristique est, nec auctor nulla. Aenean et porttitor ex, ac malesuada ipsum. Quisque sit amet urna pulvinar libero scelerisque maximus. Morbi ac tincidunt libero. Donec tempus suscipit hendrerit. Nulla et purus ultricies, eleifend augue vitae, egestas odio. Pellentesque ante libero, pulvinar quis orci quis, sodales tincidunt libero. Sed volutpat purus diam, quis gravida lacus commodo quis. Nunc interdum metus at condimentum gravida. Ut vulputate est non ultrices maximus.
</p>
<p>
Interdum et malesuada fames ac ante ipsum primis in faucibus. Aenean pharetra dignissim mattis. Cras purus risus, accumsan a sapien eu, ultricies dictum diam. In hendrerit, erat efficitur sodales tristique, purus sapien dignissim magna, non vulputate dolor tellus vestibulum sapien. Suspendisse ullamcorper dolor sit amet nisl vulputate, vitae condimentum nunc sodales. Pellentesque ut ullamcorper quam. Quisque et mauris lacus. Suspendisse commodo facilisis mi. Suspendisse sit amet metus felis.
</p>
<span id="temp-span"></span>
<h4>Code:</h4>
<pre></pre>
</div>

Hide the content under transparent fixed navbar while scrolling down

the problem:
I have transparent fixed navbar with some gap (margin-top) and below content, which is located under the navbar while scrolling down globally. The problem is that navbar is transparent and the background of the page is a dynamic slideshow of different images so I can't use z-index and hide it by changing background color or put image same as background..
In conclusion:
Transparent fixed navbar with gap
Dynamic images background
It has to be global scrolling (can't use scrolling for div content)
I'am using bootstrap 3
Drawings:
WRONG: [How its looks now][1]
RIGHT: [How it should be][2]
[1]: http://i.stack.imgur.com/Iwc1h.png
[2]: http://i.stack.imgur.com/f1Sbd.png
Sorry for problems with understanding me, here is code:
http://jsfiddle.net/5myw4e26/

if you're using a position fixed at your navbar you can do a top div empty with float left and a height with the size of your navbar.

I managed to accomplish what you we're trying to do. It's probably not the best solution, but it works.
Using JQuery I calculated when a paragraph (p.content) and the navigation-bar collided.
There's more than enough to finetune, so you can adjust it to your needs.
JQuery
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
Note that the 32 in $(this).offset().top <= $(document).scrollTop() + 32 is the height of the navigation bar.
Example:
$(document).ready(function() {
$(document).scroll(function() {
$("p").each(function() {
if ($(this).offset().top <= $(document).scrollTop() + 32) {
$(this).css("opacity", "0");
} else {
$(this).css("opacity", "1");
}
});
});
});
body {
margin: 0px;
font-family: Arial;
font-size: 12px;
min-height: 2000px;
}
nav {
width: 100%;
height: 32px;
line-height: 32px;
text-align: center;
position: fixed;
top: 0;
border-bottom: 1px solid black;
}
p.content {
margin: 12px 0px 0px 0px;
background: yellow;
}
p:first-of-type {
margin: 44px 0px 0px 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<div id="wrapper">
<nav>
Navigation Bar
</nav>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sed dolor metus. Morbi tristique nisl vel lectus rutrum, non ultricies dolor feugiat. Fusce nec dolor in purus consectetur lacinia non sit amet turpis. Donec facilisis tortor mauris, nec vulputate
massa fermentum vel. Praesent in neque quis lacus hendrerit tincidunt sed et dolor. Nullam fermentum, orci at pulvinar imperdiet, lacus libero facilisis ante, sit amet venenatis sem tortor in nibh. Ut ullamcorper porta fermentum. Praesent faucibus,
erat eget iaculis porttitor, purus purus posuere nulla, eget lacinia odio libero in lectus. Vivamus sem ex, commodo ac tortor ut, fringilla vulputate eros. Ut iaculis augue non ipsum porttitor ornare.</p>
<p class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce facilisis tellus luctus ornare hendrerit. Curabitur hendrerit justo ante. Maecenas scelerisque ligula condimentum, aliquam tortor sit amet, aliquam lacus. Interdum et malesuada fames ac
ante ipsum primis in faucibus. Ut ut augue vel massa tempus laoreet. Nulla porttitor, sem ac aliquet facilisis, purus ligula pulvinar ipsum, quis volutpat enim elit sed ante. Pellentesque quis diam vestibulum, viverra elit at, sollicitudin mi. Vivamus
vehicula ex eu justo feugiat, a ullamcorper nisi commodo. Phasellus sed tortor eget purus mollis tempor at sit amet libero. Fusce tincidunt est est, tristique pretium justo feugiat eget. Donec et lacus vehicula, aliquam sapien a, eleifend tortor.</p>
<p class="content">Vivamus vitae placerat elit. Integer eleifend nibh at purus suscipit rutrum. Aliquam et fermentum mauris. Aenean gravida velit a vehicula aliquet. Duis neque tortor, luctus eget condimentum eget, venenatis eget lorem. Maecenas sed ullamcorper tellus.
Donec euismod bibendum nunc, non ullamcorper neque cursus eget. Curabitur dapibus orci non quam vestibulum ornare. Aenean tincidunt interdum justo faucibus feugiat. Proin molestie lorem ultricies neque consequat, commodo cursus nisl molestie. Donec
gravida viverra nisl, consectetur laoreet libero interdum ac. Vivamus varius vestibulum quam eu rutrum. Pellentesque id rhoncus massa.</p>
<p class="content">Nunc finibus leo mollis efficitur tempus. Suspendisse ac elit lectus. Proin auctor ipsum faucibus arcu cursus congue. Nam rutrum odio non enim euismod auctor id in justo. Ut non sagittis orci, vel tincidunt elit. Mauris odio sem, varius eget tortor
at, commodo pretium massa. Cras sed rhoncus dolor, non dictum sem. Curabitur in imperdiet turpis, in imperdiet mi. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas erat nisl, sagittis id eleifend ut, consequat eget orci. Aenean
blandit arcu non varius ornare.</p>
<p class="content">Pellentesque molestie consectetur lectus in iaculis. Curabitur efficitur ac nisi vitae eleifend. Morbi semper tristique ornare. Morbi in cursus mauris. Morbi et risus velit. Etiam lobortis commodo dolor, ac pulvinar dolor gravida vel. Donec sollicitudin
metus urna, eu consequat magna vehicula a. Vivamus interdum, enim non consequat ultrices, lacus enim vehicula ante, vitae tristique tellus nibh sit amet eros. Aliquam consequat eu orci id rutrum. Donec lacus eros, eleifend et viverra vitae, congue
at turpis. Quisque rhoncus fermentum ex sed lobortis. Fusce luctus, lorem vitae condimentum gravida, nibh tortor elementum nulla, id auctor nisl ex eu lectus. Donec auctor ligula sem, et porttitor neque eleifend vitae. Aliquam felis lacus, sollicitudin
laoreet dui mollis, scelerisque auctor metus.</p>
</div>

dynamically change value on resize and window scroll

I have a fixed header function like below. I would like to change dynamically "100" value while window resizing.
I was trying to wrap everything in sth like "if (screen.width >= 1200)" or "jQuery(window).on('resize', function ()" but this kind of stuff is working only with page refresh.
jQuery(document).ready(function($) {
var $window = $(window),
$stickyEl = $('.tabsmenu > ul'),
elTop = $stickyEl.offset().top - 100;
$window.scroll(function() {
if ($window.scrollTop() < 900) {
$stickyEl.toggleClass('sticky', $window.scrollTop() > elTop);
} else {
$stickyEl.removeClass('sticky');
}
});
});
Any tips?

This may not be perfect but it's what I think what you want to do and the way I would do it. This just gets the scroll value and then does some math to calculate how much it needs to change. I have added a bunch of content to let it scroll.
window.onload = function() {
$("#everything").scroll(function() {
var startAt = 40; //How many pixles scrolled to start effect, 0 would match link
if ($("#everything").scrollTop() >= startAt) {
var scroll = $("#everything").scrollTop(),
total = 0, // go to this value
distance = 40, //distance to shrink
value = (scroll < distance) ? total : total + (distance - (scroll - startAt));
$("#head").css("height", value); //change #head to what ever you want to shrink
} else {
$("#head").css("background-color", value);
}
});
}
html,
body {
overflow: hidden;
/* Disables regular scrolling */
margin: 0;
padding: 0;
width: 100%;
height: 100%;
}
#everything {
overflow: scroll;
/* enables content to scroll */
position: relative;
width: 100%;
height: 100%;
padding-top: 40px;
}
#head {
width: 100%;
height: 40px;
background-color: red;
position: fixed;
top: 0px;
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
<div id="everything">
<div id="head">header</div>
<span>
Text Following text is so the page can scroll: <br/>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer porta velit eu turpis imperdiet congue. Morbi nec mi ipsum. Nam eu nunc in lorem sagittis feugiat a quis nisl. Donec suscipit leo quis magna egestas, id convallis leo gravida. Curabitur finibus lectus ut metus feugiat, eu tincidunt eros tempor. Fusce facilisis nunc vulputate, posuere velit nec, ultrices diam. Vestibulum aliquam velit in lectus imperdiet, vitae condimentum lectus finibus. Aliquam ac arcu eget velit molestie rhoncus. Etiam rhoncus, tellus nec lacinia porta, diam lorem ultrices sem, et dignissim ipsum augue non augue. Suspendisse tincidunt felis sit amet orci accumsan, at ornare tellus viverra. Nam viverra nulla in urna elementum ornare.Sed interdum nisi libero, id porta turpis consectetur vitae. Curabitur nunc ex, interdum eget hendrerit maximus, faucibus non est. Etiam scelerisque condimentum eleifend. Integer ac ligula eget magna porta tristique at eu neque. Sed venenatis ipsum non metus sodales finibus. Suspendisse nec nunc lobortis ligula venenatis tristique. Suspendisse aliquam leo elit, et pretium ipsum tempor sed. Maecenas tincidunt dictum leo sit amet accumsan. Nullam eu viverra nulla. Aenean vehicula tellus a mauris malesuada interdum. Sed libero lacus, consectetur at condimentum vel, egestas vitae nisl.Mauris facilisis tincidunt magna, at gravida elit. Cras molestie eros sed tincidunt ultricies. Pellentesque eleifend egestas orci, sit amet condimentum nisl semper eleifend. Sed ipsum elit, aliquet nec lacinia a, maximus eu dolor. Quisque finibus efficitur odio gravida convallis. Vivamus nec velit in est ornare luctus at a risus. In hac habitasse platea dictumst. Proin condimentum eget est non posuere. Vivamus ante quam, bibendum in tincidunt ut, egestas sed mauris. Nunc non interdum nibh, nec ornare tellus. In interdum elit nisi, a interdum est tempor id. Cras a elit ut purus ornare mollis sit amet ut est. Cras ut ex sed neque lacinia accumsan quis aliquet turpis. Quisque nisl nunc, pretium sed lectus pretium, lacinia ornare magna. Curabitur sit amet felis turpis. Morbi nisi mi, mattis quis tempor ut, accumsan nec ex.
</span>
</div>
</body>
</html>