I am looking at websites for inspiration for my new start ups homepage. I saw https://www.pactcoffee.com/ and their home page features a full background image for the header and the nav bar is transparent then it becomes a solid color nav bar as you scroll down. I have only been able to set up the CSS for the site but I don't understand what to do to have the change in nav bar color.
You can do something like this...
http://jsfiddle.net/ojcqbLr2/
Check the Fiddle to see the rest of the code... like the CSS.
This JS will do this.
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 100) {
$('.topMenu').fadeIn();
} else {
$('.topMenu').fadeOut();
} });
By the way, I found this info by search.
Show div on scrollDown after 800px
I just made edits to the code so it was at the top and not bottom.
Best of luck.
I have found that you can set two divs. One of which will be display set to none.
$(document).scroll(function () {
var headerHeight = $('header').height(),
s = $('.nav'),
y = $(this).scrollTop();
if (y > headerHeight) {
$('.navLong').fadeIn();
$('.nav').fadeOut();
} else {
$('.navLong').fadeOut();
$('.nav').fadeIn();
}});
This allows one div to disappear when one appears and vice versa. A working example is can be found in the DEMO
Related
im trying to make the content inside of an event in the Fullcalendar sticky. When you scroll in the calendar the content of the events should be visible as long as the event isn't out of the view.
I tried it with simple css but that doesn't work, see for yourself:
.fc-event .fc-content {
position:sticky;
top:0;
}
https://codepen.io/snak3/pen/KZKNMd
Has anyone an idea how to get this working or isn't it that easy?
It's not possible to use position:sticky out of the box, but here's an example of how you might go about it with js (add this to the end of your script):
const content = document.querySelectorAll('.fc-event .fc-content')[1];
const scroller = document.querySelector('.fc-scroller');
scroller.addEventListener("scroll", function() {
if (scroller.scrollTop > 100) {
content.style.position = "fixed";
content.style.top = "130px";
}
else {
content.style.position = "unset";
}
});
Obviously the selector and top values are very specific. You can use js to calculate the appropriate top distance for each event, and apply it for each scroll proc. That is a lot of work though.
I'm wondering if it's possible to use only CSS to create a parallax scrolling background that meets the following specifications.
It works on an element that sits inside an otherwise static layout (i.e. my whole page layout isn't a group of parallaxing items)
The background isn't entirely fixed in place; it moves, just not as fast as the rest of the page.
I've looked up tons of tutorials for parallaxing backgrounds, and have found some seemingly great tutorials, but they all have one of the following problems.
They rely on the whole page being a parallax group so that you're actually scrolling over a container via an "overflow: auto" specification
The background is totally fixed in place
they use JavaScript.
Sooo, I can accomplish what I want with JavaScript fairly easily. Here's a full working example on JSFiddle that you can try out.
CSS
.parallax-row {
background-image: url(http://lorempixel.com/output/nature-q-c-781-324-3.jpg);
background-size: auto 150%;
}
JavaScript
/**
* Update the parallaxing background img to partially scroll
*/
jQuery(document).ready(function($) {
$(window).on('scroll', function() {
$('.parallax-row').each(function(index, el) {
var $el = $(el);
var fromTop = $el.offset().top + ($el.outerHeight() / 2) - $(window).scrollTop();
var windowHeight = $(window).height();
var percent = (fromTop * 100 / windowHeight);
$el.css('background-position', '0 ' + percent + '%');
});
});
});
Is it possible to accomplish that same effect with just CSS?
In Firefox especially, I've run into an issue I can't figure out how to fix.
On the following page, when scrolling down the page jumps several times - mainly on smaller screens where the page doesn't have its full size displayed. You can replicate this issue by making your browser smaller than the page so you have to scroll.
It's on this page: http://www.nucanoe.com/frontier-accessories/
If I disable the position:fixed on the navigation selector, it fixes the issue - but we need the navigation to be sticky. Is there a solution to fix this? I'm thinking we may need to use jQuery somehow.
Thanks in advance!
After seeing you asking for help on another answer, I will try and explain more clearly for you.
The Problem
Your problem is when you add position:fixed to the navigation bar, it removes it from its place and sticks it at the top of the page. This is why the rest of your content jumps up - because the navigation bar is not where it was anymore.
How To Fix
You can get around this by wrapping your navigation element in a new div - let's call it nav-wrapper - and set its height to the same as your navigation element. These are known as placeholder elements. This new wrapper and your original navigation bar must always be the same height for the 'jump' to disappear.
<div class="nav-wrapper" style="height:80px;"> <-- add this
<div class="your-original-nav" style="height:80px"></div>
</div> <!-- add this
Now, when you set the navigation bar to fixed and it disappears to the top, the new wrapper we created with the same height keeps the page's content the same. When the fixed class has been removed, it sits back in the wrapper again, without pushing the content down.
A Suggestion
From what I can see on your site, there will be a big gap where the navigation bar was until the new fixed navigation reaches that point and covers it. What you want, is a little jQuery to figure out where to make the navigation fixed and where to hide it. I'll explain:
// cache the element
var $navBar = $('.your-original-nav');
// find original navigation bar position
var navPos = $navBar.offset().top;
// on scroll
$(window).scroll(function() {
// get scroll position from top of the page
var scrollPos = $(this).scrollTop();
// check if scroll position is >= the nav position
if (scrollPos >= navPos) {
$navBar.addClass('fixed');
} else {
$navBar.removeClass('fixed');
}
});
You may want to add further functionality to this example, as it is very, very basic. You would probably want to recalculate the offsets on window resize as one addition.
A Demo
This is a little demo which might help you - I was bored and feeling helpful :)
Made it this way now: Added an element before the nav:
<div class="nav-placeholder"></div>
And the jquery:
<script type="text/javascript">
$(document).on("scroll",function(){
if($(document).scrollTop()>150){
$(".nav-placeholder").height($(".nav").outerHeight());
} else {
$(".nav-placeholder").height(0);
}
});
</script>
When I scroll down to 150 the placeholder gets the height of the nav, when i scroll up again I set it's height to 0.
Here is a fiddle: https://jsfiddle.net/herrfischerhamburg/562wu62y/
You need to have a placeholder when your nav goes from relative to fixed.
Therefore you need to make a new div.
jQuery(".nav").wrap('<div class="nav-placeholder"></div>');
jQuery(".nav-placeholder").height(jQuery(".nav").outerHeight());
jQuery(".nav").wrapInner('<div class="nav-inner"></div>');
Remember to change ".nav", "nav-inner" and "nav-placeholder" to your desire.
For a fully functional sticky nav, check my website: http://www.swegre.se/
I solved the problem differently so on firefox as you can see in logs it scroll up itself so to stop this scrolling I made simple statement
$(document).ready(function () {
var header = $('#left-menu');
var offset = header.offset().top;
var up = true;
$(window).scroll(function () {
var scroll = $(window).scrollTop();
console.log(scroll + ' ' + offset )
if (scroll >= offset) {
header.addClass('sidebar-sticky');
if (up){
$(window).scrollTop(offset);
up=false;
}
} else {
up=true;
header.removeClass('sidebar-sticky');
}
});
});
that solution work for me when I can't specify height of div's I use.
I have managed to use the position:fixed setting of CSS/CSS3 before and worked quite well!
I saw this a few days ago and was wondering how did they achieve the effect that happens when you scroll down, where the menu bar is in one position before you scroll and then goes to the top where it locks itself down.
See link - http://www.cssportal.com/ < scroll down on any page and observe the top blue menu.
I have tried to look in the source of the page but I cant make head or tails.
Does anyone know what this effect is called?
It's done with javascript, to add a css class that contains position:fixed and other positioning styles to achieve what you want.
It's not complicated. Here is a jquery plugin: http://stickyjs.com/
This is how I did it a few years ago:
var menu_bar = $("#menu");
var top = menu_bar.offset().top;
var detached = false;
$(window).scroll(function (e) {
if ($(this).scrollTop() >= top) {
if (!detached) {
detached = true;
menu_bar.addClass('fixed');
}
} else {
if (detached) {
detached = false;
menu_bar.removeClass('fixed');
}
}
});
See the following post for a picture highlighting my question and a potential solution:
CSS overflow-y:visible, overflow-x:scroll
However, this strategy breaks when you actually move the scrollbar. In the suggested implementation (position: fixed;), the tooltips display next to child div in its position pre-scroll. So, as you scroll new child-divs into view, the tooltips begin falling off the bottom of the page.
See here for a demo of the bug: http://jsfiddle.net/narcV/4/
Any ideas how I can make the tooltips display next to the child div at all times?
I ended up implementing this using javascript, using the getPos function from this question.
The end product looks like:
var scrollPanel = ...;
var tooltip = ...;
function nodeHovered(e) {
var hovered = e.srcElement;
var pos = getPos(hovered);
pos.x += hovered.offsetWidth;
pos.y -= scrollPanel.scrollTop;
tooltip.style.setProperty('left', pos.x);
tooltip.style.setProperty('top', pos.y);
}
Basically, I calculate where on the page the node is currently displayed (taking into account the scrollbar position), and manually place the tooltip in the right spot on the page.
Too bad there's no elegant/CSS way to do this, but at least this works.