I'm using this demo my project.
http://tympanus.net/Development/ArticleIntroEffects/index3.html
I want to do fixed menu after scrolling. And I use this js but it doesn't work.
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100)
$cache.css({'position': 'fixed', 'top': '10px', 'display': 'block'});
else
$cache.css({'position': 'relative', 'top': 'auto', 'display': 'none'});
}
$(window).scroll(fixDiv);
fixDiv();
How can i make ?
codrops-demos is a class, not an id, so you should use .codrops-demos rather than #codrops-demos.
Not sure that will be enough, though.
Is this what you are looking for?
http://jsfiddle.net/Pa36p/5/
JQuery (JS)
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100) $cache.css({
'position': 'fixed',
'top': '10px',
'display': 'block'
});
else $cache.css({
'position': 'relative',
'top': '110px'
});
}
$(window).scroll(fixDiv);
fixDiv();
You defined the display of the menu to none when the window scroll is less than 100px. So, the menu doesn't show up. If you are trying to do something like in the Codrops example, you should only fix the menu when the scrolling is bigger than the distance between the menu and the top of the screen.
Cleaning your code
Here is a simpler and more readable version of the code you did, leveraging the browser's javascript processing by using CSS.
http://jsfiddle.net/Pa36p/8/
JQuery (JS)
function fixDiv() {
var $cache = $('#codrops-demos');
if ($(window).scrollTop() > 100)
$cache.removeClass('relative').addClass('fixed');
else
$cache.removeClass('fixed').addClass('relative');
}
$(window).scroll(fixDiv);
fixDiv();
CSS
.fixed{
position: fixed;
top: 10px;
}
.relative{
position: relative;
top: 110px;
}
Related
I've looked at this article and followed the top answer but I can't get it to work for me.
HTML
<div id="project">
<div class="details">
<p>Lorem Ipsum>
</div>
<div class="process">
<div class="col-6 fixme">Content</div>
<div class="col-6">Content</div>
</div>
</div>
CSS
#project {
position:fixed;
left:0;
width:100%;
height:100%;
top:100%;
}
body.projectLoaded #project {
opacity:1;
top:0;
}
Javascript
var fixmeTop = $('.fixme').offset().top;
$(window).scroll(function() {
var currentScroll = $(window).scrollTop();
if (currentScroll >= fixmeTop) {
$('.fixme').css({
position: 'fixed',
top: '0',
left: '0'
});
} else {
$('.fixme').css({
position: 'static'
});
}
});
I've a better understanding of the issue and why I got it working in a fiddle but not here. When on the homepage, if I'm scrolling down, after x height it becomes fixed. Once .projectLoaded is on body a fixed div #project is present, in the fixed div I'm trying to make it so when you scroll to .fixme it also becomes fixed, but it doesn't detect that you're at the right point in the scroll for the div to become fixed.
Is something like $(window, "#project-container").scroll(function() realistic?
Also, this is sort of a side question, but if it becomes fixed, how can I contain it in a relative div? Would it look like this?
HTML
<div class="container">
<div class="parent">
<div class="child"></div>
</div>
</div>
CSS
.container { position:relative; width:1280px; }
.parent { position:absolute; }
.child { position:fixed; width:960px; }
Would this be the best approach? What I want to achieve is when you look at this page, I'd like the .fixme div to follow the user as you scroll down.
Do this with jQuery
function fixDiv() {
var $div = $(".fixme");
if ($(window).scrollTop() > $div.data("top")) {
$div.css({'position': 'fixed', 'top': '0', 'width': '100%'});
}
else {
$div.css({'position': 'static', 'top': 'auto', 'width': '100%'});
}
}
$('.fixme').data("top", $('.fixme').offset().top); // set original position on load
$(window).scroll(fixDiv);
jsFiddle
jQuery:
$(document).ready(() => { //makes sure document is loaded
var fixmeTop = $('.yourdiv').offset().top; //gets the initial position of element
$(window).scroll(function() { //scroll event listener
var currentScroll = $(window).scrollTop(); //applies position, and makes it fixed when you scroll to it or below ↓
if (currentScroll >= fixmeTop) {
$('.yourdiv').css({
position: 'fixed',
top: '0',
left: '0'
});
} else {
$('.yourdiv').css({ //sets position to static if you scroll above it ↑
position: 'static'
});
}
});
});
I am attempting the below (within footer.php) and no such luck.
Script:
$(document).ready(function(e) {
$('.navbar-collapse').click(function(){
$(function() {
var docHeight = $(document).height();
$("body").append("<div id='overlay'></div>");
$("#overlay")
.height(docHeight)
.css({
'opacity' : 0.7,
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
});
});
});
});
Mark-Up:
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
Any suggestions on how to fade or grey out the background or all body content when nav toggle is triggered and present -- the goal is to have the mobile navigation not be opacity but everything else to be opacity. Cheers for any pointers. (Wordpress website) Eg. Click navigation > nav toggle appears > body and all content behind it and elsewhere is #000 opacity .7 while nav toggle is present, once closed, restored back to original state without opacity.
a good start would be changing your jquery to the following:
$(function() {
var docHeight = $(window).height();
$('.navbar-collapse').click(function(){
$("<div id='overlay'>")
.height(docHeight)
.css({
'opacity' : 0.7,
'position': 'fixed',
'top': 0,
'left': 0,
'background-color': 'black',
'width': '100%',
'z-index': 5000
}).appendTo('body');
});
});
edit
DEMO
check this out, it's mostly css but i think it's what you want.
$(function() {
$('.navbar-toggle').on('click', function() {
$('body').toggleClass('menu-open');
})
});
then css
body.menu-open:after {
content: '';
display: block;
position: fixed;
top: 0; bottom: 0; left: 0; right: 0;
width: 100%;
height: 100%;
z-index: 1000;
background: rgba(0,0,0,0.7);
}
I need to freeze the footer panel when it's parent div reaches the bottom of the browser.
What I have tried is to make it to freeze when I scroll the page but I need it when the parent parent div reaches the bottom of the browser.
For example in my demo there is a content panel which is hidden. If you click on expand link you get to see the expanded content.
When this content expands the bottom_content div moves to the bottom, I need the footer div in it to stick to the bottom as soon as bottom_content is pushed down.
Here is my code currently used
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom: '0px', width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: '0px', width: '100%' });
}
});
DEMO
**Hope this is what ur trying to achieve...DEMO
$('.expandble_conetnt a').click(function(event){
event.preventDefault();
$(this).next('span').slideToggle();
});
//this is for stick to the bottom
var stickyHeaderbottom = $('.footer').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderbottom) {
$('.footer').css({ position: 'fixed', bottom:0, width: '95%', left: '2.5%' });
} else {
$('.footer').css({ position: 'static', bottom: $('.expandble_conetnt').offset().top, width: '100%' });
}
});
I'm using a js on my website (with wordpress) to get a stick to top menu when scrolling my page.
it works, when scrolling my header sticks on top, but there's a gap in my #entry content.
like on this example :
http://www.amsbooking.fr/mattieumoreau/artists/amine_edge_and_dance/
when scrolling and when my header sticks to top, the tittle "amine edge and dance" dissapears under the header, it is not fluid...
I guess there's a padding missing or something in my JS but I can't find why...
here is my css :
#stickyheader { width: 100%;padding-top:10px;top: 0;z-index: 1000;padding-bottom: 10px;line-height: 24px;position:relative;background-color: #f8f8f8;}
#unstickyheader {height:auto;}
and my JS :
$(function () {
// Check the initial Poistion of the Sticky Header
var stickyHeaderTop = $('#stickyheader').offset().top;
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#stickyalias').css('display', 'block');
}else{
$('#stickyheader').css({
position: 'relative'
});
}
});
});
here is jsfiddle :http://jsfiddle.net/2UCH4/
can anybody help me with this ?
thanks a lot for your help !
Since you are setting that element with position:fixed the space that was fill by the element is now available and the next container just switch up. To fix that you can correct the space with margin-top:
$(window).scroll(function () {
if ($(window).scrollTop() > stickyHeaderTop) {
$('#stickyheader').css({
position: 'fixed',
top: '0px'
});
$('#stickyalias').css('display', 'block');
var mT = $('#stickyheader').css('height'); /*Add this*/
$('#stickyheader').next('.post').css('marginTop', mT); /*Add this*/
}else{
$('#stickyheader').css({
position: 'relative'
});
$('#stickyheader').next('.post').css('marginTop', '0'); /*Add this*/
}
});
Check this Working Demo
I've got a div with position: fixed that moves with the scroll properly, but I'd like to have it stop when it reaches certain (y-axis) boundaries. What's the method to go about doing this?
Ideally the solution doesn't flicker and is performant. Twitter's right panel is close to what I'd like.
This is a more functional vetrsion of http://jsbin.com/ijexe
(updated the code to reenable the origional position... essentially once it hits its origional top position it will start scrolling again)
You can update the http://jsbin.com/ijexe code to test simply by swapping out the jquery function with the one below...
In the
<script type="text/javascript" src="Sandbox_files/jquery.min.js"></script>
in the example:
.fixedElement {
Z-INDEX: 100; POSITION: absolute; BACKGROUND-COLOR: #c0c0c0; WIDTH: 100%; HEIGHT: 30px; COLOR: #800000; FONT-SIZE: large; TOP: 200px
}
(just make sure you have your position:absolute & top: value set)
Updated function (place before the closing body tag)
<script type="text/javascript">
$(window).scroll(function(e){
var scrollTo = 200;
var scrollClass = '.fixedElement';
$el = $(scrollClass);
position = $el.position();
if ($(this).scrollTop() > scrollTo && $el.css('position') != 'fixed'){
$(scrollClass).css({'position': 'fixed', 'top': '0px'});
} else if ((position.top < scrollTo) && ($el.css('position') != 'relative')){
$(scrollClass).css({'position': 'relative', 'top': '200px'});
}
});
</SCRIPT>
You can update:
scrollTo - The offset from the top of the screen to start/stop the element scrolling
* Just make sure scroll to is set to the same value as your stylesheet decliration...
scrollClass - The class name for the element(s) to apply the function to