I've made a header is fixed at the top with a fixed position, in which there is a logo and menu in the header. what i want to ask how to hide the logo when a user scrolls to the middle. and the menu shifts up replacing the logo?
Here is my HTML/CSS:
#header {
position:fixed;
width:100%;
}
.logo {
background:#ccc;
}
.logo h2 {
margin:0px;
}
.menu {
background:red;
}
#konten {
padding-top:50px;
}
<div id="header">
<div class="logo">
<h2>Example WEb</h2>
</div>
<div class="menu">HOMEAboutContact
</div>
</div>
<div id="konten">
1abcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcdefghiabcdefghia
<br>defghiabcdefghiab
<br>cdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabc
<br>defghiabcdefghiabc
<br>defghiabcdefghiabcdefg
<br>hiabcdefghiabcde
<br>fghiabcdefghiabcdef
<br>ghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiab
<br>cdefg
<br>hiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghiabcdefghiabcdefghiab
<br>cdefghiabcdefghiabcdefghia
<br>bcdefghiabcde
<br>fghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdef
<br>ghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabcdefgh
<br>iabcdefghiabcdefghiabcdefghi
<br>abcdefghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghiabcd
<br>efghiabcdefghiabcdefghiabcdefg
<br>hiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghiabc
<br>defghiabcdefghiabcdefghia
<br>bcdefghiabcdefghiabcdefghiabcde
<br>fghiabcdefghiabcdefghi
</div>
<div id="footer">
</div>
External JSFiddle
while you tagged Jquery .. can be done with jquery
$(document).ready(function(){
$(window).on('scroll',function(){
var windowScroll = $(this).scrollTop();
if(windowScroll >= ($(this).height())/2){
$('.logo').slideUp(500);
}else{
$('.logo').slideDown(500);
}
});
});
JsFIDDLE
I hope this is what you want!!
$(window).scroll(function() {
if ($(this).scrollTop() > 200) { //use `this`, not `document`
$('.logo').css({
'display': 'none'
});
}
else
{
$('.logo').css({
'display': 'block'
});
}
});
Demo Here
Change your CSS of header to below so that it remains at top
#header {
position:fixed;
width:100%;
top:0px;
}
Related
I have logo1 in the header changing to logo2 when user scrolls down. However, I don't want the logos to instantly switch but rather the first logo gradually fade out as the second logo fades in. I have added .fadeIn(slow) and .fadeOut(slow) in various places in my js but it's had no effect. Hoping I can get some help with this.
I've updated my question with more code. I've had 2 answers but can't get either to work for me and no more responses. Hoping an edited question with more detail will get a bit more attention.
<header>
<div id="nav" class="navbar">
<div id="nav_left">
HOME
SERVICES
PORTFOLIO
</div>
<a href="index.html" id="logo" class="Claire_logo">
<img src="images/logo_6_small.png" alt="logo2" id="logo_Claire" class="logo_main"
style="display:none" />
<img src="images/logo_bluebird_90_cc.png" alt="logo1" id="logo_Claire_blue" class="logo" />
</a>
<div id="nav_right">
BLOG
ABOUT
GET IN TOUCH
</div>
</div>
</header>
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$(".navbar").addClass("navbar-scroll");
$(".logo").show();
} else {
$(".navbar").removeClass("navbar-scroll");
$(".logo").hide();
}
if (scroll > 120) {
// $(".navbar").addClass("nav-color");
$(".logo_main").show();
$(".logo").hide();
} else {
// $(".navbar").removeClass("nav-color");
$(".logo_main").hide();
$(".logo").show();
}
});
});
You can do that using jQuery replaceWith
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll > 0) {
$('#oldlogo').fadeOut(500, function() {
$('#oldlogo').replaceWith('<div id="newlogo"><img src="newlogo" alt="newlogo"/></div>').fadeIn(500);
});
}
});
});
body {
height: 200vh
}
header {
height: 50px;
position: fixed;
top: 0;
width: 100%;
background: white;
}
#nav {
display: flex;
justify-content: center;
flex-direction: row;
height: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header>
<div id="nav" class="navbar">
<div id="oldlogo"> <img src="oldlogooldlogo" alt="oldlogo" /></div>
</div>
</header>
I edited my answer. I missed the error in your code. I commented below in codes. You can use both fadeIn & fadeOut or show & hide methods as well. But for fadeing effect using fadeIn & fadeOut maybe looks better than show & hide
$(document).ready(function() {
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 0 && scroll <= 120) { // I missed this logic mistake for the first time.
$(".navbar").addClass("navbar-scroll");
$(".logo").fadeIn(300); // or show(300)
} else {
$(".navbar").removeClass("navbar-scroll");
$(".logo").fadeOut(0); // or hide()
}
if (scroll > 120) {
// $(".navbar").addClass("nav-color");
$(".logo_main").fadeIn(300);
$(".logo").fadeOut(0);
} else {
// $(".navbar").removeClass("nav-color");
$(".logo_main").fadeOut(0);
$(".logo").fadeIn(300);
}
});
});
I am modifying some jQuery that shows a div when nav links are hovered.
html:
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
jQuery to show dropdowns:
function initSlideDrops() {
var activeClass = 'drop-active';
var animSpeed = 300;
jQuery('#nav ul li').each(function() {
var item = jQuery(this);
var link = item.find('>a[data-drop^="#"]');
//if (!link.length) return;
// Modifications to add hover events to nav menu
if (!link.length) {
jQuery(this).on('mouseover', function (e) {
jQuery("li").removeClass("drop-active");
jQuery('.drop').each(function () {
jQuery(this).stop().animate({
height: 0
}, animSpeed);
});
});
return;
};
var href = link.data('drop');
var drop = jQuery(href).css({
height: 0
});
if(!drop.length) return;
var dropHolder = drop.find('>.drop-holder');
var close = drop.find('.btn-close');
function showDrop(elem) {
elem.stop().animate({
height: dropHolder.innerHeight()
}, animSpeed, function() {
elem.css({
height: ''
});
});
}
function hideDrop(elem) {
elem.stop().animate({
height: 0
}, animSpeed);
}
link.on('click', function(e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if(item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
location.href = link.attr('href');
}
});
close.on('click', function(e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
// Modifications to add hover events to nav menu
link.on('mouseover', function (e) {
e.preventDefault();
item.add(drop).toggleClass(activeClass).siblings().removeClass(activeClass);
if (item.hasClass(activeClass)) {
showDrop(drop);
hideDrop(drop.siblings());
} else {
hideDrop(drop);
//location.href = link.attr('href');
}
});
drop.on('mouseleave', function (e) {
e.preventDefault();
item.add(drop).removeClass(activeClass);
hideDrop(drop);
});
});
}
This is all working, however the dropdown navigation causes the content to bump down, rather than sliding on top of the site body. I would like the main content to remain where it is, with the navigation showing on top when hovered. I have tried adding z-index during the animate event but could not get it to work. What is the proper way to accomplish this?
Any help is appreciated.
Edit:
SASS:
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
.drop-holder{
overflow:hidden;
}
}
Try Adding position:absolute; to .drop-holder. See snippet below.
You will also want to remove overflow:hidden; from .drop.
.drop{
#extend %clearfix;
/* overflow:hidden; - Remove this */
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /* add this so .drop is positioned relative to .drop */
}
.drop-holder {
position:absolute;
border:solid 1px teal; /*for demonstration*/
}
About
<div class="drop" id="drop-about">
<div class="drop-holder">
<div class="grey-block">
<strong class="title">Sub Nav</strong>
<ul>
more links ...
</ul>
</div>
</div>
</div>
<div>content <br />content <br />content <br />content <br />content <br />content <br />content <br />
</div>
Positioning property must be specified when using z-index.
Example. Apply
.drop{
#extend %clearfix;
overflow:hidden;
text-transform:uppercase;
letter-spacing: 1.65px;
position:relative; /*Positioning applied here*/
z-index:1;
}
This should fix your problem.
I am trying to get the scroll down and up position at This Demo but as you can see it is updating the <p> element on every single pixel by pixel scroll (Up or Down). But what I need to only update the <p> on every 200 scroll until reaching the end of the div (right now the p element is updating on every single scroll).
Here is the code I have:
$(window).scroll(function () {
var height = $(window).scrollTop();
if (height > 200) {
$('p').html(height);
}
});
div {
height:1080px;
}
p {
position:fixed;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p></p>
<div>
<h3> Hello Scroll!</h3>
</div>
How can I fix this?
var a=0;
$(window).scroll(function () {
var height = $(window).scrollTop();
if (height-a<200){
if (height-a<-200){
$('p').html(a);
a = parseInt(height/100) *100;
}
}else{
$('p').html(a);
a = parseInt(height/100)*100;
}
});
div {
height:1080px;
}
p {
position:fixed;
top:0;
left:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<p></p>
<div>
<h3> Hello Scroll!</h3>
</div>
I have this HTML code
HTML
<div id="d1"></div>
<div id="d2"></div>
<div id="d3"></div>
<div id="d4"></div>
<div id="d5"></div>
and this CSS code
CSS
#d1, #d2, #d3, #d4, #d5{ float:left; height:500px; width:200px; display:none;}
Script:
<script>
$(document).ready(function() {
$(window).scroll(function() {
if ($("#d2").height() <= ($(window).height() + $(window).scrollTop())) {
$("#d1").css("display","block");
}else {
$("#d1").css("display","none");
}
});
});
</script>
Question:
When I scroll page down each div display one by one.
When scroller reach at "#d2" the div "#d1" should be displayed, When scroller reach at "#d3" div "#d2" should be displayed.... and when scroller reach at the end of page "#d5" should be displayed.
You may try this similar case:
http://jsfiddle.net/j7r27/
$(window).scroll(function() {
$("div").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 100 ) {
$(this).css('opacity',1);
} else {
$(this).css('opacity',0);
}
});
});
I have this form Im creating and when you click on the "Next" button I want to slide the next form() across to the left this is my function
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
That function isn't working the way I want to. it slides the text in the container across not the whole container it could be a css problem for all I know.
And my form which has a class name .wikiform doesn't center horizontally. here is my full code. I'm not that experience in javascript so you would be appreciated. cut and paste and try it out
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd" />
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.4.4.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/jquery-easing.1.2.pack.js"></script> <script type="text/javascript" language="javascript">
(function ($) {
$.fn.WikiForm = function (options) {
this.Mode = options.mode || 'CancelOk' || 'Ok' || 'Wizard';
var current = jQuery('.wikiform .view :first');
function positionForm() {
//jQuery('.wikiform').css( {'top':
jQuery('body')
.css('overflow-y', 'hidden');
jQuery('<div id="overlay"></div>')
.insertBefore('.wikiform')
.css('top', jQuery(document).scrollTop())
.animate({ 'opacity': '0.8' }, 'slow');
jQuery('.wikiform')
.css('height', jQuery('.wikiform .wizard .view:first').height() + jQuery('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - jQuery('.wikiform').height() / 2)
.css('width', jQuery('.wikiform .wizard .view:first').width())
.css('left', -jQuery('.wikiform').width())
.animate({ marginLeft: jQuery(document).width() / 2 + jQuery('.wikiform').width() / 2 }, 750);
jQuery('.wikiform .wizard')
.css('overflow', 'hidden')
.css('height', jQuery('.wikiform .wizard .view:first').height() );
}
if (this.Mode == "Wizard") {
return this.each(function () {
var current = jQuery('.wizard .view :first');
var form = jQuery(this);
positionForm();
jQuery('input[name^=Next]').click(function () {
current.animate({ marginLeft: -current.width() }, 750);
current = current.next();
});
jQuery('input[name^=Back]').click(function () {
alert("Back");
});
});
} else if (this.Mode == "CancelOk") {
return this.each(function () {
});
} else {
return this.each(function () {
});
}
};
})(jQuery);
$(document).ready(function () {
jQuery(window).bind("load", function () {
jQuery(".wikiform").WikiForm({ mode: 'Wizard', speed:750, ease:"expoinout" });
});
});
</script>
<style type="text/css">
body
{
margin:0px;
}
#overlay
{
background-color:Black; position:absolute; top:0; left:0; height:100%; width:100%;
}
.wikiform
{
background-color:Green; position:absolute;
}
.wikiform .wizard
{
clear: both;
}
.wizard
{
position: relative;
left: 0; top: 0;
width: 100%;
list-style-type: none;
}
.wizard .view
{
float:left;
}
.view .form
{
}
.navigation
{
float:right; clear:left
}
#view1
{
background-color:Aqua;
width:300px;
height:300px;
}
#view2
{
background-color:Fuchsia;
width:300px;
height:300px;
}
</style>
<title></title>
</head>
<body><form action="" method=""><div id="layout">
<div id="header">
Header
</div>
<div id="content" style="height:2000px">
Content
</div>
<div id="footer">
Footer
</div>
</div>
<div id="formView1" class="wikiform">
<div class="wizard">
<div id="view1" class="view">
<div class="form">
Content 1
</div>
</div>
<div id="view2" class="view">
<div class="form">
Content 2
</div>
</div>
</div>
<div class="navigation">
<input type="button" name="Back" value=" Back " />
<input type="button" name="Next " class="Next" value=" Next " />
<input type="button" name="Cancel" value="Cancel" />
</div>
</div></form></body></html>
Try changing this line:
var current = jQuery('.wizard .view :first');
(which was selecting the form element directly under 'view')
to this:
var current = jQuery('.wizard .view:first');
// The first element with a class of 'view' under an element with a class of
// 'wizard'
Update, due to comments below:
To make a simple scrolling widget, you need the following:
An outer <div> with a fixed width and height
An inner <div> with a fixed height and a very long width.
Code to change the left offset of the inner <div>.
You can see a simple example of a widget like this here: http://jsfiddle.net/andrewwhitaker/feJxu/
For the OP's specific problem, I've modified the code that assigns CSS properties to look like this:
$('.wikiform')
.css('height', $('.wikiform .wizard .view:first').height() + $('.wikiform .navigation').height())
.css('top', window.screen.availHeight / 2 - $('.wikiform').height() / 2)
.css('width', $('.wikiform .wizard .view:first').width())
.css('left', -$('.wikiform').width())
.css('overflow', 'hidden') // ADDED
.animate({marginLeft: $(document).width() / 2 + $('.wikiform').width() / 2
}, 750);
$('.wikiform .wizard')
.css('width', '10000px') // ADDED. May need to be longer depending on content.
.css('height', $('.wikiform .wizard .view:first').height());
I've also changed the animation that 'next' does:
$('input[name^=Next]').click(function() {
$(".wizard").animate({
left: "-=" + current.width() + "px"
}, 750);
}); // Similar logic for 'back'
What this is doing is basically altering the left offset of the view with a huge width (.wizard) and scrolling a new form into the view with a fixed width and height (.wikiform). See a working sample here: http://jsfiddle.net/andrewwhitaker/J9L8s/