I've looked everywhere on how to do this particular thing. But I'm attempting to create a header like on: http://pinkpeonies.com/. Where the logo moves over, and the navigation floats right when the user scrolls far enough down. I can't seem to find how to do it. How would I create a header like this? What would be the best way?
$(window).on("scroll", function () {
if ($(this).scrollTop() > 100) {
$("#header").addClass("scroll-down");
}
else {
$("#header").removeClass("scroll");
}
});
and you can style scroll-down class in css
Related
Here's my website http://tapash.atwebpages.com/
As you can see my logo is white and it becomes invisible when scrolled up. How can I specify a logo by CSS when scroll up the page and menu becomes sticky? I have another color logo which I would like to put there. Thanks
I have seen that you already use jQuery on your website. This makes it very easy to implement.
Give your image an ID for JavaScript:
<img src="LOGO_WHITE" id="test" />
Execute a function on scrolling:
$(window).scroll(function (event) {
...
});
When scrolling (your header turns white), a different image should be set:
$("#test").attr("src", "LOGO_BLACK");
But now the problem is that the logo is permanently black. You have to set the white logo again when the user scrolls at the top:
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
}
Your function should therefore look like this:
$(window).scroll(function (event) {
if($(window).scrollTop() <= 0) {
$("#test").attr("src", "LOGO_WHITE");
} else {
$("#test").attr("src", "LOGO_BLACK");
}
});
Example on JSFiddle: https://jsfiddle.net/18v9d5eq/1/
It looks like you're using a template from Drupal. If you are not familiar with web technologies, my solution above is the easiest. The cleanest solution would be to include both images (white and black) in the header and then just set the visibility with display: hide/block.
so in the back of the 'discover meteor' book they explain how to do page transitions. i've got it working, however it causes problems with the loading of javascript functions and variables on other pages that its animating into. it seems they're not ready or simply don't exist at the time the page is routed.
Template.layout.onRendered(function() {
this.find('.pos-rel')._uihooks = {
insertElement: function(node, next) {
$(node).hide().insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", 1000)
},
removeElement: function(node) {
$(node).velocity({
opacity: 0,
},
{
duration: 100,
complete: function() {
$(this).remove();
}
});
}
}
});
if i remove the above code then all my javascript variables and functions work correctly. does anyone have another working solution to page transitions using velocity.js ? i did find this one but its a year old and i couldn't get it to work at all, it just makes the content where '{> yield}' is go blank :(
Just a note for asking questions on stack overflow: "causes problems with the loading of javascript functions and variables" is pretty vague. Its best to give more specifics.
But anyways, you said here that you're using isotope to render items in a grid. I'm assuming you're calling $elements.isotope() within a Template[name].onRendered callback.
This is probably the issue because its trying to compute and rearrange into a grid the elements while they're hidden. Using display: none actually removed the elements, thus isotope can't compute the sizes, etc. for the layout. Try this:
insertElement: function(node, next) {
$(node).css("opacity", 0).insertBefore(next)
.delay(200)
.velocity("transition.slideUpIn", {duration:1000, display:null})
},
opacity: 0 should do what you're looking for. It will make them transparent without removing them from the transition.slideUpIn should animate opacity so you're good there.
Also, velocity transitions mess with the display property. Setting display: null in the animation options prevents it from setting the display to block or whatever it wants to do. This may or may not be necessary, but I pretty much always use it.
You could use:
onAfterAction
onBeforeAction
. The solution should be something like this:
animateContentOut = function() {
$('#content').css('display', 'none');
this.next();
}
fadeContentIn = function() {
$('#content').velocity('transition.fadeIn',1000);
}
Router.onBeforeAction(animateContentOut)
Router.onAfterAction(fadeContentIn)
I need the fixed navbar to shrink 50% when it starts scrolling.
I have seen just text navbars, but nothing with a logo. Any help would be much appreciated.
http://carpetliquidators.com/demo/
You can pull the css and html from there.
This can be accomplished by using jQuery and a custom CSS class, like so:
$(window).scroll(function() {
if ($(document).scrollTop() > 150) {
$('.navbar').addClass('shrink');
}
else {
$('.navbar').removeClass('shrink');
}
});
I received a task at work to create some mini-webpage layout with bootstrap. I decided to base on already done layout (Amoeba). Here is the preview: Amoeba bootstrap link
Well, on localhost almost works except one thing - footer. Just take a look on provided link and then: click Portfolio (from navigation) and then filter the gallery by Photography.
When you will scroll down you will see ugly space. And this is my issue. I dont want that. So i thought that I need a footer OR portfolio div class which will automatically resize to proper size. BUt I dont how how to achieve that. Any tips?
You need only to change the code of modernizr slightly. Change forceHeight to false and will work good.
if (Modernizr.mq("screen and (max-width:1024px)")) {
jQuery("body").toggleClass("body");
} else {
var s = skrollr.init({
mobileDeceleration: 1,
edgeStrategy: 'set',
forceHeight: false,
smoothScrolling: true,
smoothScrollingDuration: 300,
easing: {
WTF: Math.random,
inverted: function(p) {
return 1-p;
}
}
});
}
Im not sure why, but your body element gets some height inline styling. Anyways here is the solution of your problem:
body {
height:100% !important; // inline styles, so you need to add "!important" here
position:relative;
}
#footer {
position: absolute;
width: 100%;
bottom: 0px;
}
You can also add wrapper div if you don't want to add position:relative and height:100%!important properties to your body element. Just see how it works and choose a better option for you.
Any idea how to make such a thing as seen here http://studiompls.com/case-studies/crown-maple/
Header goes smaller and logo changes to different button. Can it be done with CSS without writing any JS?
Cheers!
Update:
if JS is a must, any link you can recommend to learn? Thanks.
Easy use jquery:
$(window).scroll(function(){
if($(window).scrollTop() >= $('.header').outerHeight()) {
// put content here for if the page has scrolled 200 pixels
}
});
Make sure you have a js file though
You can do it with jquery.
It's pretty easy.
Here's a demo: http://jsfiddle.net/jezzipin/JJ8Jc/
$(function(){
$('#header_nav').data('size','big');
});
$(window).scroll(function(){
if($(document).scrollTop() > 0)
{
if($('#header_nav').data('size') == 'big')
{
$('#header_nav').data('size','small');
$('#header_nav').stop().animate({
height:'40px'
},600);
}
}
else
{
if($('#header_nav').data('size') == 'small')
{
$('#header_nav').data('size','big');
$('#header_nav').stop().animate({
height:'100px'
},600);
}
}
});
I made a fiddle that only uses CSS, no Javascript, to achieve roughly the same effect: the header grows smaller when you scroll down past the first section, and its icon changes. And of course when you scroll back up, the header grows again and gets its old icon back. Done with nothing more esoteric than a couple of :hovers (and a transition, but that's just icing; it works on non-transition-aware browsers).
This may not be exactly what you are after, but you can use it as a fallback in case the user has Javascript switched off.
Here is whole tutorial on that effect and I don't think it is possible to do it without js 'cause you need to checking on scroll, and do toggleClass with jQueryUI for example or something :)
hope it helps ;)
Cheers
Since you need to style the inner element of navigation it will be better to add
class on navigation to style inner items
<div class="outer">
<div id="menu">addd</div>
and js
$(window).scroll(function () {
var sc = $(window).scrollTop();
if (sc > 50) {
$("#menu").addClass("big");
} else {
$("#menu").removeClass("big");
}
});
and finally css
#menu {
position:fixed;
height:50px;
background:#ccc;
left:0;
top:0;
float:left;
width:100%;
}
.outer {
height:800px;
}
#menu.big {
height:20px;
}
here is the link