We Keep Coding

Sticky nav with parallax banner

I'm working on a mock clothing site. I have a parallax banner and a nav below it. What I'm trying to achieve is having the nav stick to the top of the page once the user actually scrolls past the nav. I am able to get the nav to stick to the top of the page, but it does so while still on the banner image.
Here's the CSS
.banner {
background-image: url('https://images.pexels.com/photos/896291/pexels-photo-896291.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260');
background-size: cover;
min-height: 100%;
background-attachment: fixed;
}
nav {
border-top: solid #000 1px;
background-color: #fff;
padding: 5px;
margin: 0 0 50px 0;
}
.sticky {
position: fixed;
width: 100%;
top:0;
border-bottom: solid black 1px;
box-shadow: 0 2px 5px dimgray;
}
Here's the jQuery
$(window).on('scroll', function() {
if($(window).scrollTop()) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
})
And here's my fiddle demonstrating the issue.
I've had a few theories on why this is happening.
At first I thought maybe it's happening because my top is set to 0, but when I changed the value it still triggered .sticky, but just floated in the middle of the page.
Then I thought, maybe it was because I attached scrollTop() to window. I tried attaching it to nav like this
if($('nav').scrollTop()) {
//add class
}
and that didn't work either.
Thanks in advance for any insight you guys might have!

First of all you will have to check if you the scroll top is bigger then a the value it should be scrolling to the top. If you did that, you should be able to just add a class to that item or remove it.
Example:
var slide = $('yourIdOrClassName').offset().top;
$(window).on('scroll', function() {
if($(window).scrollTop() > slide) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
});
You will need a class with the property display: none; and a class with the property display: block;
The property of display: none; says that the element will not be shown on the page. display: block is the default display property for the nav / div element.

Safari OS X 10.10.4 Font Weight Issue While Scrolling

I'm facing right now weird problem that so far occurs just in Safari (8.0.7) under OS X (Yosemite 10.10.4). What is the problem? I ahve two menu bars. Both are relative and positioning works fine. The point is that when I scroll, 50 px from top I add class that makes second bar position fixed + top 0. This also works perfectly but... when this class is added I see that font-weight of the target bar is changed to something smaller.
(I'm taking about bar that has items: "Australia", "New Zealand" etc.)
I've recorded my screen: https://www.youtube.com/watch?v=H9_VmXDqqBE. Please watch in HD. Top right. Second bar contains names of some categories. If you will look closer you will see that font weight is changed and names are much more thinner than they should be.
I'm pretty much confident about my code and:
I don't manipulate font-weight explicitly.
This happens just in Safari (OS X)
Chrome and FF work good.
It's a minor issue but I want to learn something new and face it.
Below are some code snippets to give you general preview of the situation.
$(window).scroll(function()
{
var top = $(window).scrollTop();
if (top > 50) {
$('#blog_categories_container').addClass('sticky_top');
} else {
$('#blog_categories_container').removeClass('sticky_top');
}
});
CSS for the "blog_categories_container" bar and "sticky_top" class:
nav#blog_categories_container.container_white {
background-color: rgba(0,0,0,0.66);
}
nav#blog_categories_container {
left: 0;
list-style: none outside none;
margin: 0;
padding: 0;
position: absolute;
top: 50px;
width: 100%;
z-index: 1030;
}
nav#blog_categories_container ul {
float: right;
margin: 0;
overflow: auto;
padding: 0;
}
nav#blog_categories_container ul li {
float: left;
overflow: hidden;
padding: 5px 30px 5px 5px;
white-space: nowrap;
position: relative;
color: #cccccc;
}
nav#blog_categories_container ul li:last-of-type {
padding-right: 0;
}
nav#blog_categories_container.sticky_top {
position: fixed;
top: 0;
}
Can someone give me any hints? Thank you.

This generally happens when something causes the font smoothing to change (probably when you add/ remove the sticky_top class).
Try adding
-webkit-font-smoothing: antialiased;
to the nav#blog_categories_container section of your css file.
If that doesn't work try -webkit-font-smoothing: subpixel-antialiased;

Android Chrome fixed menu popping in and out with url disappearing

EDIT: Here's a Youtube video that illustrates my problem:
http://youtu.be/OguwjZR_GdU
On my website Black Star Opal I've been trying to implement a sticky menu, much like this one Dansk Kids. I looked at the Dansk Kids website javascript and CSS: there seems to be no javascript involved in their menu (other than the removal of the logo underneath their sticky menu when they scroll). I want my sticky menu to be as smooth as theirs if possible (ie staying flush with the url bar as it pops in and out).
Here's my css for #carttrans, the menu div:
position: fixed;
-webkit-backface-visibility: hidden;
height: 49px;
top: 0px;
left: 0px;
background-color: rgb(255, 255, 255);
width: 100% !important;
z-index: 10000;
text-align: center;
margin-left: 0px;
padding-left: 7px;
border: 1px solid rgb(221, 221, 221);
border-left: none;
border-right: none;
border-bottom-style: solid !important;
border-bottom-width: 1px !important;
border-bottom-color: rgb(221,221,221) !important;
-webkit-transform: translateZ(0);
I also use this js code (only because the menu wouldn't display on iOS Safari without it, although I'm unsure why):
$(function() {
// grab the initial top offset of the navigation
var sticky_navigation_offset_top = $('#carttrans').offset().top;
// our function that decides weather the navigation bar should have "fixed" css position or not.
var sticky_navigation = function(){
var scroll_top = $(window).scrollTop(); // our current vertical position from the top
if ($(window).width() < 500)
{
// if we've scrolled more than the navigation, change its position to fixed to stick to top, otherwise change it back to relative
if (scroll_top > sticky_navigation_offset_top) {
$('#carttrans').css({ 'position': 'fixed', 'top':0, 'left':0 });
} else {
$('#carttrans').css({ 'position': 'fixed' });
}
}
};
// run our function on load
sticky_navigation();
// and run it again every time you scroll
$(window).scroll(function() {
sticky_navigation();
});
});
I even removed all the elements in the menu and just left the blank white bar there to see if it would do the same thing. It popped in and out awkardly just like before.
Any help with this would be amazing.
EDIT: As I said below, it's the URL bar popping in and out that seems to be disturbing my sticky menus. It could possibly be a repaint issue or slow down, because on other sites the disappearance of the url bar and the subsequent movement of the menu (for example, on sticky menu demos) is quite smooth and I'm doing/have tested them with the same url bar popping.
Cheers,
Rob

HTML
<header><h1>Sticky Header</h1></header>
<img src="large-image.jpg" width="782" height="2000" alt="Big Image" />
jQuery (remember to include the jquery library)
$(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('header').addClass("sticky");
}
else{
$('header').removeClass("sticky");
}
});
CSS:
header{
position: fixed;
width: 100%;
text-align: center;
font-size: 72px;
line-height: 108px;
height: 108px;
background: #335C7D;
color: #fff;
font-family: 'PT Sans', sans-serif;
}
header.sticky {
font-size: 24px;
line-height: 48px;
height: 48px;
background: #efc47D;
text-align: left;
padding-left: 20px;
transition: all 0.4s ease;
}
REFERENCES:
http://www.webdesignerdepot.com/2014/05/how-to-create-an-animated-sticky-header-with-css3-and-jquery/
PREVIOUS SAME QUESTION ON STACK OVERFLOW:
CSS Sticky header

I used firebug for firefox and just added the following to your #carttrans ID i am assuming you only want this to stick? If so check the css below replace your #carttrans with the below and lemme know if that is what you want?
#carttrans {
background: none repeat scroll 0 0 white;
position: fixed;
text-align: right;
top: 40px;
z-index: 999;
}

Hi i looked at your youtube clip and i see that it could be that the jquery you are using is affecting your main div for the top section #carttrans make sure on this div that your css is marked as important for the top 0px !important so that the jquery won't be able to change it have a try and see if this works?

Animate Over Shooting Mouse Click JQuery?

I have the basic idea of my JavaScript operational.
The point of my JavaScript is to make an image of id 'player' move to the position that I click with the mouse, only when I click on the div with the id of 'stage' with the animation lasting 3 seconds.
At the same time, when the animation is running the head should change to 'player is moving' as opposed to when it is still and displaying 'player is still'.
Right now, in Chrome (maybe its a bug with Chrome) the basic functionality of the JS works. However, it seems to overshoot the position of where I click the mouse on the first round and then barely move when I click again in the 'stage' div.
If anyone sees where I might be running into a problem please let me know!
Here's my EDITED JQuery:
$(document).ready(function(){
$('#stage').click(function(e){
$('#header h1').html('Player is moving!');
$('#player').animate({
top: e.pageY + 'px',
left: e.pageX + 'px'
}, 3000, function(){
$('#header h1').html('Player is standing still...');
});
});
});
I have fixed my CSS issue, so don't worry about that but the code is located below for the CSS in case anyone thinks the issue may lie within.
Thanks!
EDIT:
Here's the CSS. The issue has been solved but it has been provided for convenience if you think the issue of the image overshooting the image may lie within for any reason:
#header {
width: 600px;
margin: 20px auto 10px;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
}
#header h1 {
text-align: center;
margin: 0;
}
#stage {
overflow: hidden;
width: 600px;
height: 400px;
margin: 0 auto;
padding: 5px;
background-color: whiteSmoke;
border: 1px solid #aaa;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
box-shadow: 0 0 5px #ccc;
position: relative;
}
#player {
position: absolute;
width: 36px;
}

Poor man's example : jsfiddle but it works in FF and Chrome.
Also, I'm curious what styles you lose, simple color style is always applied.
So more information is needed, can you share the complete css?
Update: I'm still not seeing an issue in chrome (with the fiddle example)
Change #stage to something like
#stage {width:600px;height:600px;background-color:#333;position:fixed;top:20;left:0;}
Your player vs page is lying about it's position or where you can click. I wanted the stage to be a fixed item on the page, non-moving. I don't see any other reason (in your CSS or jQuery) why it'd overshoot.
​

CSS and Javascript vertical alignment problem

let me preface this by saying I don't really know CSS at all. I'm trying to make a performance bar using CSS and Javascript and what I have so far creates a bar background and then a bar inside that one that fills it up to the specified percentage. My problem is that the "inner bar" comes down from the top instead of up from the bottom. I could just subtract the percentage from 100 and take the absolute value, but that seems like kind of a dirty hack. I would like to just see how I could make this be aligned at the bottom and "grow" up as the height grows rather than starting at the top and growing down.
CSS Code
.cssSmall .performanceBack
{
position: absolute;
z-index: 1;
height: 20px;
width: 18px;
top: 4px;
left: 81%;
background-color: Brown;
}
.cssSmall .performanceBar
{
font-size: 6px;
vertical-align: top;
background-color: Orange;
}
Javascript code
this.performanceBack = gDocument.createElement("performanceBack");
this.performanceBack.className = "performanceBack";
div.appendChild(this.performanceBack);
this.performanceBar = document.createElement('div');
this.performanceBar.className = 'performanceBar';
//Hard coded value for testing
this.performanceBar.style.height = '30%';
this.performanceBack.appendChild(this.performanceBar);
Thanks.

Since you've already set .performanceBack to position: absolute I would do the same for .performanceBar but set the bottom property to 0 which will make it anchored to the bottom-left corner of .performanceBack.
.cssSmall .performanceBar
{
font-size: 6px;
background-color: Orange;
position: absolute;
left: 0;
bottom: 0;
width: 100%;
}
You can see it in action at http://jsfiddle.net/U5V2b