I'm trying to design a website for my company, but I can't figure one thing.
I want navbar fixed while people scroll down the page
like this one
http://www.quintessentially.com (as you can see, the navigation bar gets fixed when you scroll down the page )
I'm using jQuery 1.8.3.min.js
and this code
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.nav').addClass('absolute');
}
else {
$('.nav').removeClass('fixed');
}
});
and the css is like this
header .nav{
top: 55px;
padding: 0;
min-height: 0;
font-family: 'Lato', sans-serif;
text-transform: uppercase;
font-size: 12px;
letter-spacing: 0.5px;
line-height: 3px;
width: 100%;
position: absolute;
z-index: 999;
}
.fixed{
position: fixed;
top: 0; }
But I don't why it isn't working.
Does someone know how to fix it?
Thanks !! :D
ps: sorry about my bad english.
You need to reverse the logic.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('.nav').
.removeClass('absolute')
.addClass('fixed');
}
else {
$('.nav')
.removeClass('fixed')
.addclass('absolute');
}
});
Added a removeClass as well to prevent any class priority issues.
Related
For a school project, I need to build a site. One of the things required is a header and preferably, a sticky one.
I went to w3schools and I found a tutorial for it, and I put it in my project, but well, the header is definitely not sticking. After about an hour of searching, I gave up. Can maybe one of you help me? (I'm just a beginning high school computer science kid, my code ain't that brilliant or whatever)
I have tried changing the id's and classes of the code I already had. And I've tried to look for mistakes, but without success.
Html
<header class="header" id="myHeader">
<h1>My Page</h1>
</header>
CSS
.top-container {
background-color: #f1f1f1;
padding: 30px;
text-align: center;
}
.header {
padding: 10px 16px;
background: #555;
color: #f1f1f1;
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 102px;
}
#openNav{
text-align: left
}
Javascript
window.onscroll = function() {myFunction()};
var header = document.getElementById("myHeader");
var sticky = header.offsetTop;
function myFunction() {
if (window.pageYOffset > sticky) {
header.classList.add("sticky");
} else {
header.classList.remove("sticky");
}
}
So, the header exists and looks like a header, the only thing is; it doesn't stick at all.
as #blex mentioned, the provided code seems to work. Anyways, I just wanted to point out that you can also make a sticky header without any javascript, simply with the css property position: fixed.
.header {
position: fixed;
top: 0px;
height: 40px;
}
heres a fully functional codepen example.
Solved it, myself :))
Accidentally put the script tag in <head> instead of <body>
I ask my question as someone who knows pretty much nothing (nothing at all) about coding. I am clearly very confused about how HTML, CSS, and JS interact.
I am creating a Squarespace website, and I found an FAQ form from Codepen.io that I would like to include on a specific page of the website. I want to know how to approach inserting the HTML, CSS, and JS into a Squarespace code block.
I am able to copy and paste the HTML part of the code into the Squarespace code block feature and the FAQ form shows up, but without all the colors/fonts/styles that the CSS and JS code apparently bring to it. That is about all I got to "work." Below I provided a link to the code I am referring to. I hope this is all making sense.
FAQ form in question: codepen.io/sarenz/pen/azGLRg
*I have added the CSS and JS codes for context
CSS:
{ /basic reset/
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
/* background: red; */
background: lightgray;
}
.faq-wrapper{
border-bottom: 1px solid rgba(0,0,0,0.5);
font-family: 'Lato';
line-height: 1.6;
padding: 40px 40px 17px 75px;
position: relative;
}
i {
display: block;
height: 50px;
width: 50px;
}
a{
cursor: pointer;
display: block;
height: 40px;
margin-right: 0;
position: absolute;
right: 75px;
top: 30px;
width: 40px;
}
a.hide-button{
z-index: -1;
}
p.faq__question, p.faq__answer{
margin-left: 30px;
margin-right: 100px;
max-width: 650px;
}
p.faq__question{
font-weight: 700;
padding-bottom: 20px;
}
.hidden-part {
height: 0;
}
.hidden-part *{
opacity: 0;
}
.faq__question:before, .faq__answer:before{
color: #3376b3;
font-weight: 900;
margin-left: -30px;
position: absolute;
}
.faq__question:before{
content: 'Q:';
}
.faq__answer:before{
content: 'A:';
}
JS:
$( function(){
'use strict';
var $showButton = $('.faq-wrapper .expand-button'),
$hideButton = $('.faq-wrapper .hide-button');
$showButton.click(function(){
var id = $(this).attr('data-id');
var height = $('.hidden-part[data-id="'+id+'"] >.faq__answer').height();
height = height+25;/Adds extra padding to the bottom/
$(this).velocity({opacity:0})
.css('z-index',1)
.next('.hide-button')
.velocity({opacity:1})
.css('z-index',2)
.next('.hidden-part')
.velocity({height:height});
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:1},{duration:400});
});
$hideButton.click(function(){
var id = $(this).attr('data-id');
$('.hidden-part[data-id="'+id+'"] *').velocity({opacity:0},{duration:200});
$(this).velocity({opacity:0})
.css('z-index',1)
.prev('.expand-button')
.velocity({opacity:1})
.css('z-index',2)
.next()
.next()
.velocity({height:0});
});
} );
Congrats on getting started in the coding world! Squarespace has a tutorial on adding custom HTML, CSS, and JS to your website: link
As far as understanding how HTML, CSS, and JS interact, there are plenty of tools available to help you learn depending on your preferred learning style: Google Results
Here's the basic run-down:
HTML: The content that you want on your website
CSS: The formatting of that content
JS: Logic to change the content and formatting based on conditions or events (ie user clicks a button)
hope someone can provide some guidance here. I have got some JS which tells the div to slide in to view after the user scrolls past the set Y point.
However, on page load, the div is still visible until you start scrolling. then it disappears and then slides in when its meant to.
jQuery(document).ready(function ($) {
$(document).scroll(function() {
var y = $(this).scrollTop();
if (y > 800) {
$('.mobileEnquiry').slideUp();
} else {
$('.mobileEnquiry').slideDown();
}
})
})
body {
height: 1200px
}
.mobileEnquiry {
display: flex;
position: fixed;
z-index: 999999;
bottom: 0;
width: 100%;
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
background-color: red;
height: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobileEnquiry"></div>
Anyone know why this happens? I have tried a couple of things. Firstly, moving it out of the 'on page load' section of my JS however that did nothing. Then I have looked around and tried different methods but none have worked.
jQuery slideUp() Method Hide the matched elements with a sliding motion. and the slideDown() Method, Display the matched elements with a sliding motion. So:
$( document ).ready( function () {
$( document ).scroll( function() {
var y = $( this ).scrollTop();
( y > 800 ) ? $( '.mobileEnquiry' ).slideDown() : $( '.mobileEnquiry' ).slideUp();
} )
} )
body {
height: 1200px
}
.mobileEnquiry {
display: none;
position: fixed;
z-index: 999999;
bottom: 0;
width: 100%;
color: #fff;
text-transform: uppercase;
font-weight: 600;
font-size: 11px;
background-color: red;
height: 100px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mobileEnquiry"></div>
So I'm trying to get a div to fade in when a scroll threshold has been reached. It starts off with display: none; in the css for its div id. When the threshold is hit, fadein does not remove display:none; from the css as I've read it should.
CSS:
#SideBanner01{
display: none;
right: 0;
margin-left: 60.4%;
margin-right: 3%;
margin-top: .25%;
overflow: hidden;
}
#SideBanner01 img{
width: 206.25%;
margin: -30% -15% -8% -140%;
}
Javascript:
$(window).scroll(function () {
var delay = 500;
var scrollTop = $(window).scrollTop();
if (scrollTop > 20) {
$('#SideBanner01').fadeIn(delay);
}
else{
$('#SideBanner01').hide();
}
});
Inspector after fadein runs:
element {
position: fixed;
}
#SideBanner01 {
display: none;
right: 0;
margin-left: 60.4%;
margin-right: 3%;
margin-top: .25%;
overflow: hidden;
}
body {
color: #000000;
text-align: left;
}
Html:
<div style="position: fixed;" id="SideBanner01"><img src="http://survey.unifocus.com/ClientFiles/19500/Bardessono-stone-wheels.jpg"></div>
I'm using jquery 1.6 so I believe fadein should work as I'm trying it. Any idea on what is going on? I've been able to get "$('#SideBanner01').show(delay);" to work but it flies in from the side but it looks pretty tacky. Thanks in advance.
Don't you mean to do:
$(window).scroll(function () {
var delay = 500;
if ($(this).scrollTop() > 20) {
$('#SideBanner01').fadeIn(delay);
}
else{
$('#SideBanner01').hide();
}
});
In your code snippet, scrollTop is used as a regular variable (not defined).
I am currently using the MeanMenu JQuery plugin to create a responsive navigation for my website and I would like to know how can I add in a title name to the navigation once it's in responsive mode.
My JQuery skills are not that strong and I'm unsure.
Demo: http://www.meanthemes.com/demo/meanmenu/demo.html. View it in responsive, and there's 3 bars on the right that acts as a menu drawer. I would like to add a title next to the bar.
Most of the responsive part of the navigation is written in JQuery, which is something new to me.
Would appreciate some help on this.
Link: http://jsfiddle.net/dDRZe/4/
Thank you.
You could maybe do something like this:
Javascript
$(window).resize(function() {
if (window.innerWidth < 480) {
$('.mean-bar').before('<div class="myDiv">content</div>');
}
});
CSS
.myDiv {
color: #fff;
position: absolute;
top: 0px;
left: 20px;
line-height: 40px;
}
Updated simpler solution
Add to the top of your page:
<div class="myDiv">Content</div>
CSS to show/hide it:
.myDiv {
color: #fff;
position: absolute;
top: 0px;
left: 20px;
line-height: 40px;
display:none;
}
#media screen and (max-width:480px){
.myDiv {
display:block;
}
}
That will give you a div which you can put whatever title you want onto and style it how you want with CSS.
This is how I solved (IE >= 9)...
#media screen and (max-width:480px){
a.meanmenu-reveal::after {
content: "menu";
font-size: 16px;
position: absolute;
text-indent: 0;
left: -40px;
bottom: 12px;
}
}