So right now I'm building out our new website, and I've programmed a nice little sticky header using javascript. Here's my Javascript.
http://dev.yoursparksource.com
<script>
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1){
$('.stickyheader1').addClass("sticky");
}
else{
$('.stickyheader1').removeClass("sticky");
}
});
</script>
And my CSS for the stickyheader and .sticky added class
.stickyheader1 {
position: fixed;
width: 100%;
-webkit-transition: background .3s ease-in-out;
-moz-transition: background .3s ease-in-out;
-ms-transition: background .3s ease-in-out;
-o-transition: background .3s ease-in-out;
transition: background .3s ease-in-out;
height: 85px;
}
.stickyheader1.sticky {
background: rgba(0,0,0,0.80);
-webkit-transition: background .4s ease-in-out;
-moz-transition: background .4s ease-in-out;
-ms-transition: background .4s ease-in-out;
-o-transition: background .4s ease-in-out;
transition: background .4s ease-in-out;
}
And this works PERFECT. My problem is the dropdown menu. I styled a little CSS caret, and when you scroll down and the header background activates, the caret is on top of the header's space, and you can see it behind the semi-transperent header. (EWW! Tacky...)
What I'm wondering, is how can I target this element, as it's an :after pseudo class.. Here's the current CSS for the caret (or top triangle as some call it.)
#nav ul ul:After {
content: '';
position: absolute;
border-style: solid;
border-width: 0 10px 10px;
border-color: rgba(0,0,0,0.40) transparent;
display: block;
width: 0;
z-index: 1;
top: -10px;
left: 20px;
}
I tried just using the same javascript with the "#nav ul ul:After", but after researching, I learned how you can't add styles to a pseudo class. Duh, I knew that, just forgot. That's all. ;-) Any assistance on getting that little caret to go away when I scroll and the stick header's bg activates? Would be a lifesaver for me. (Also, if it can animate with the opacity transition like the header, that would rock. Once I figure out how to target it, I can add the css animation.
Thanks a MILLION in advance! I love StackOverflow.
You will need JavaScript to loop through the stylesheet, find the rule for #nav ul ul:After and set its display property to none after the sticky class is added to .stickyheader1.
jQuery(window).scroll(function() {
if ($(this).scrollTop() > 1) {
$('.stickyheader1').addClass("sticky");
var ss = document.styleSheets;
for (i = 0; i < ss.length; i++) {
var rules = ss[i];
for (j = 0; j < rules.cssRules.length; j++) {
var r = rules.cssRules[j];
if (r.selectorText == "#nav ul ul:After" || r.selectorText == "#nav ul ul::After") {
r.style.display = 'none';
}
}
}
} else {
$('.stickyheader1').removeClass("sticky");
}
});
Related
I am sure my problem is pretty easy to solve. I want to apply fade in when my header became visible and fadeout when it isn't visible. So i don't want to be that rough. I tried with header.removeClass('clearHeader').addClass("darkHeader").fadeIn(slow); but that didn't help me. I also tried to add transitions in CSS but that didn't help me too.
Javascript:
$(function() {
//caches a jQuery object containing the header element
var header = $(".clearHeader");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader");
} else {
header.removeClass("darkHeader").addClass('clearHeader');
}
});
});
CSS:
header {
width:100%;
height: 70px;
position: fixed;
z-index:999;
background-color:#fff;
box-sizing:border-box;
}
header nav {
display:inline-block;
float:right;
line-height:70px;
}
header nav a {
margin-left: 25px;
font-weight: 700;
font-size: 18px;
}
header nav a:hover {
text-shadow:1px 1px 1px red;
}
.clearHeader{
display:none;
opacity:0;
width: 100%;
-webkit-transition:all 1s ease-in-out;
-moz-transition:all 1s ease-in-out;
-o-transition:all 1s ease-in-out;
-ms-transition:all 1s ease-in-out;
transition:all 1s ease-in-out;
}
.darkHeader {
display:visible;
opacity:1;
z-index:999;
}
CODE PEN
try by remove opacity and display visible code from css and try fadeIn and fadeOut Like:
if (scroll >= 50) {
header.removeClass('clearHeader').addClass("darkHeader").fadeIn('slow');
} else {
header.removeClass("darkHeader").addClass('clearHeader').fadeOut('slow');
}
To solve your problem you can simply use jQuery's animate. Here's the syntax and explanation. It smoothly animates any css property you would want to animate. Therefore you can do:
CSS:
header {
opacity:1;
}
(just sets the default)
JS:
header.animate({opacity: "0"}, 500);
To fade out, and the same thing but with opacity 1 to fade in. You may want to comment out the display part of your classes for testing though, as it may influence how it all behaves.
I'm building a page in fullpage.js. On the first slide is an image that consumes 90% of the height of the viewport. The other 10% is a navigation bar at the below the image. The image below demonstrates it.
As I scroll to the next slide, I want the navigation bar to become a fixed header for the remainder of the slides.
I tried making the element fixed once it's offset().top value is 0 against $(window).top() using jQuery. This did not work for me.
$(window).scroll(function () {
var nav = $('#nav');
var eTop = nav.offset().top;
if ((eTop - $(window).scrollTop()) == 0) {
nav.addClass('fixed');
}
else {
nav.removeClass('fixed');
}
});
Is this possible and how do I achieve it?
If you are using the default option css3:true, then this will do the trick:
$('#fullpage').fullpage({
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
onLeave: function(index, nextIndex, direction){
//leaving 1st section
if(index == 1){
$('.header').addClass('fixed');
}
//back to the 1st section
if(nextIndex == 1){
$('.header').removeClass('fixed');
}
}
});
And you will need this CSS for the header element:
.header{
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
position:absolute;
top:100%;
margin-top: -100px;
left:0;
background:#000;
width:100%;
color: #fff;
height: 100px;
z-index:999;
}
.header.fixed{
bottom:auto;
top:0;
margin-top: 0;
}
You can of course, change the height and so on.
Take into account that I've placed the fixed element outside the plugin's wrapper. This way I will avoid problems with the translate3d property used by the plugin:
<div class="header">Header</div>
<div id="fullpage">
<div class="section">...</div>
<div class="section">...</div>
...
</div>
See a demo
Update:
If you are using scrollBar:true, then use the following CSS instead of the previous one:
.section {
text-align:center;
}
.header{
-webkit-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
-moz-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
-o-transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
transition: all 0.7s cubic-bezier(0.895, 0.030, 0.685, 0.220);
position:fixed;
top:100%;
margin-top: -100px;
left:0;
background:#000;
width:100%;
color: #fff;
height: 100px;
z-index:999;
}
.header.fixed{
bottom:auto;
top:0;
margin-top: 0;
position:fixed;
}
See demo
Why not just check if you have scrolled past the height of the window?
Check out my fiddle here
$(window).scroll(function () {
var nav = $('#nav');
var offset = $(this).height();
if (($(window).scrollTop()) >= offset) {
nav.addClass('fixed');
}
else {
nav.removeClass('fixed');
}
});
I need to be able to fade in a second image above the initial image on hover. I need to make sure that second image isn't visible initially until it fades in. The other important note is that neither of the images should fade out entirely at any time. I've tried several approaches such as using 1 image, 2 images, jquery animate and css transition.
I've read that it is possible to animate a change of attribute using jquery? If this is true, how could I animate the change of 'src' in img using jquery?
$(".image").mouseenter(function() {
var img = $(this);
var newSrc = img.attr("data-hover-src");
img.attr("src",newSrc);
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
}).mouseleave(function() {
var img = $(this);
var newSrc = img.attr("data-regular-src");
img.fadeTo('slow', 0.8, function() {
img.attr("src", newSrc);
});
img.fadeTo('slow', 1);
});
This is what i'm currently using. It's the closest i've gotten. But you can see the image change which is not desirable.
Using a single html element with background images
HTML - doesn't get simpler than this
<div id="imgHolder"></div>
CSS
#imgHolder {
width: 200px;
height: 200px;
display: block;
position: relative;
}
/*Initial image*/
#imgHolder::before {
content:"";
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
background-image:url(http://placehold.it/200x200);
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
z-index:10;
}
#imgHolder:hover::before {
opacity:0;
}
#imgHolder::after {
content:"";
background: url(http://placehold.it/200x200/FF0000);
top: 0;
left: 0;
bottom: 0;
right: 0;
position: absolute;
z-index: -1;
}
Demo
OR if you want to use image tags...
Stealing straight from: http://css3.bradshawenterprises.com/cfimg/
HTML
<div id="cf">
<img class="bottom" src="pathetoImg1.jpg" />
<img class="top" src="pathetoImg2.jpg" />
</div>
CSS
#cf {
position:relative;
height:281px;
width:450px;
margin:0 auto;
}
#cf img {
position:absolute;
left:0;
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.top:hover {
opacity:0;
}
There are many other examples in the link as well to play with, but this will get you started.
Final Opacity
You've mentioned you don't want the initial image to disapear comletely. To do this change opacity:0 to opacity:0.5 or something similar. You'll need to experiment with that value to get the result you want.
Demo with final opacity of 0.8
Dynamic Image Sizes
I think you will be stuck with the two image version for this if just using CSS. HTML is the same.
CSS
#cf {
position:relative;
}
#cf img {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
}
#cf img.bottom {
z-index:-1;
opacity:0;
position:absolute;
left:0;
}
#cf:hover img.top {
opacity:0.8;
}
#cf:hover img.bottom {
display:block;
opacity:1;
}
Demo
I'm having a small issue with my code. I have an element that when the page scrolls it will appear. However, I cannot get it to "appear" in a smoother way. I have tried CSS transitions and attempted fadeIn but neither work. It always just "jumps" in, I cannot get it to ease in.
Here is the code:
$(window).on("scroll", function () {
$('.navbar').toggleClass('visible', $(document).scrollTop() > 40);
});
So it appears just fine, but I can't figure out how to animate adding the class name.
This is the CSS btw:
.navbar {
visibility: hidden;
}
.navbar.visible {
visibility: visible;
}
visibility can't be animated with CSS transitions.
But you can do :
.navbar {
opacity: 0;
transition: opacity .5s ease; // Feel free to use prefixes.
}
.navbar.visible {
opacity: 1;
}
CSS transition / animations is surely the best way to animate something in 2014. You should avoid fadeToggle() and others jQuery animation methods.
instead of using toggleClass, use fadeToggle. it will do everything for u as far as CSS..
give it a try, just fadeToggle();
Here is the example of your code with correct css transition. You cannot animate visibility, but you can play with position and opacity.
http://jsfiddle.net/xZ6fm/
.navbar {
position: fixed;
top: -100px;
left: 0; right: 0;
padding: 12px;
opacity: 0;
background: #ccc;
}
.navbar.visible {
top: 0;
opacity: 1;
-webkit-transition: top 0.3s linear, opacity 0.7s linear;
-moz-transition: top 0.3s linear, opacity 0.7s linear;
transition: top 0.3s linear, opacity 0.7s linear;
}
As indicated in the other answer, fadeToggle() will get the work done for you. And frankly, it's probably the easiest way to accomplish such an effect.
CSS transitions require the transition property. Place this block of code in each of your CSS declarations:
transition: visibility .25s linear;
-webkit-transition: visibility .25s linear;
-moz-transition: visibility .25s linear;
-o-transition: visibility .25s linear;
If you have difficulties with visibility, try using opacity instead.
The scenario: one main container, a child img with opacity 1 and a child span with opacity 0, both absolute positioned against the relative positioned parent div. Decrease the opacity of img and simultaneously increase the opacity of span. When the opacity exceeds some threshold, e.g. 0.01 and 0.99 hide/show (display: none; display: inline-block) the img/span respectively. And then the reverse process to show the img and hide the span. What would be the best solution (probably using CSS3) to achieve that?
<div id="post-cont">
<img id="post-img-1" class="post-img" src="small.jpg"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
Had some workaround with JS, but it is laggy so I would like to solve this using CSS3 and as minimal JS as possible.
CSS3 only
http://jsfiddle.net/SPmj5/7/
<div id="post-cont">
<img id="post-img-1" class="post-img" src="http://placehold.it/250x250"/>
<span id="post-txt-1" class="post-txt">Some text</span>
</div>
#post-cont {
position: relative;
}
#post-cont img,
#post-cont span {
display:block;
-o-transition: opacity .7s ease;
-ms-transition: opacity .7s ease;
-moz-transition: opacity .7s ease;
-webkit-transition: opacity .7s ease;
transition: opacity .7s ease;
}
#post-cont img {
position: absolute;
top: 0;
left: 0;
opacity: 1;
}
#post-cont span {
position: absolute;
top: 100px;
left: 80px;
opacity: 0;
}
#post-cont:hover img {
opacity: 0;
}
#post-cont:hover span {
opacity: 1;
}
Be aware transition is not supported in IE8/9 http://caniuse.com/#search=transition
Sounds like some fadeToggle to me! I don't think you can use pure CSS3 for this..
https://api.jquery.com/fadeToggle/