I have a div which would be hidden after scrolling to 100px but then if they refresh the whole page when the scroller is at 180px or such its displaying, soon after i start scrolling it gets back to hidden.
how can i handle this situation of not to show even after refresh if the page is scrolled above to 100px
following is the script i am using to hide the div, what better i can do to this script to handle this issue
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('div').hide();
}
else
{
$('div').show();
}
});
made fiddle for you here
use class with height :100px and when scroll 100px, but change as you needed
$(window).scroll(function() {
if ($(this).scrollTop()>100)
{
$('.a').fadeOut();
}
else
{
$('.a').fadeIn();
}
});
and this is css
body {
height: 2000px;
}
.a {
height: 100px;
width: 100px;
background-color: green;
}
you must do the checking upon loading the document as well, you can do this with $(document).ready
(function(){
$(window).scroll(function() {
checkTop();
});
$(document).ready(function() {
checkTop();
});
function checkTop(){
if ($(window).scrollTop()>100)
{
$('#selectorToYourElement').hide();
}
else
{
$('#selectorToYourElement').show();
}
}
})();
Related
When using a combination of jQuery and CSS to trigger my navbar to shrink on scroll, it get's buggy when you scroll back up to a certain position, I have linked a video as an example.
I have tried two different methods. The first is using $(window).scrollTop) with an if statement and a series of .addClass and .removeClass. The second thing I have tried is using $(window).scrollTop) with a series of .css dynamic style modifications. Both of these attempts render the same end result that is shown in this video https://youtu.be/YXKsrL1cghs .
My first jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").removeClass("py-5");
$(".navbar").addClass("compressed");
} else {
$(".navbar").addClass("py-5");
$(".navbar").removeClass("compressed");
}
});
});
My second jQuery attempt:
$(document).ready(function () {
$(window).on("scroll", function () {
if ($(window).scrollTop() >= 40) {
$(".navbar").css({ "padding-top": "10px" });
$(".navbar").css({ "padding-bottom": "10px" });
} else {
$(".navbar").css({ "padding-top": "3rem" });
$(".navbar").css({ "padding-bottom": "3rem" });
}
});
});
My CSS:
.navbar.compressed {
padding-top: 10px;
padding-bottom: 10px;
}
My expected results would be a smooth scrolling fixed navbar that shrinks to a smaller size after scrolling beyond a certain point.
What actually occurs is that when you scroll down past a certain point, for 20px worth of height, it gets super buggy and starts bouncing up and down. Once you clear those 20 or so px it's perfectly fine, but when you scroll back up it acts the same within those 20px.
When watching the video, I noticed that your .navbar has transition: all .3s. It could be the reason that when you remove the class py-5 and add class compressed, it triggers the transition twice.
It would be helpful if you can provide the HTML markup and CSS as well.
The script is manipulating the DOM quite a lot. I am not sure if this is going to fix your problem but it might be a good idea to only change the classes if the have not yet been applied.
$(document).ready(function() {
$(window).on("scroll", function() {
let navbar = $(".navbar");
if ($(window).scrollTop() >= 40) {
if (navbar.hasClass("py-5")) {
navbar.removeClass("py-5");
navbar.addClass("compressed");
}
} else {
if (navbar.hasClass("compressed")) {
navbar.addClass("py-5");
navbar.removeClass("compressed");
}
}
});
});
body {
height: 10000px;
position: relative;
}
.navbar {
width: 100%;
position: fixed;
height: 50px;
top: 0;
transition: all .3s
}
.py-5 {
background-color: blue;
padding-top: 10px;
padding-bottom: 10px;
}
.compressed {
background-color: red;
padding-top: 0px;
padding-bottom: 0px;
}
<html>
<head></head>
<body>
<nav class="navbar py-5">Navigation</nav>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>
I can't use bootstrap for this i can use jquery
I have basic page with a container which has a button and some paragraph
I want to move this at the bottom on the page when the user scrolls
Also this should only happen in a mobile view.
example: https://creditcards.chase.com/a1/marriottpremier/8TK?CELL=679Z&nck=120931994&ck=1213078&lk=1000160171
They used bootstrap
<div>
<h2>Near<h2>
<div>
<button>Learn more<button>
<p>conditions<p>
<div>
I have used jquery and media queries for this to work.
CSS
#media only screen and (max-width: 380px) {
.fixed {
bottom: 0;
position: fixed;
left: 0;
width: 100%;
max-width: 374px;
margin: 0 auto;
background-color: blue;
height: 70px;
}
}
JQuery
<script>
jQuery(document).ready(function() {
// define variables
var navOffset, scrollPos = 0;
// add utility wrapper elements for positioning
jQuery("nav").wrap('<div class="button1"></div>');
jQuery("nav").wrapInner('<div class="inner"></div>');
jQuery(".nav-inner").wrapInner('<div class="inner-most"></div>');
// function to run on page load and window resize
function stickyUtility() {
// only update navOffset if it is not currently using fixed position
if (!jQuery("nav").hasClass("fixed")) {
navOffset = jQuery("nav").offset().top;
}
// apply matching height to nav wrapper div to avoid awkward content jumps
jQuery(".nav-placeholder").height(jQuery("nav").outerHeight());
} // end stickyUtility function
// run on page load
stickyUtility();
// run on window resize
jQuery(window).resize(function() {
stickyUtility();
});
// run on scroll event
jQuery(window).scroll(function() {
scrollPos = jQuery(window).scrollTop();
if (scrollPos >= navOffset) {
jQuery("nav").addClass("fixed");
} else {
jQuery("nav").removeClass("fixed");
}
});
});
</script>
i only know the basics on coding, and i've hit a dead end right here. Is there a simple code on how to make something visible only when scrolled after a few pixels?
You can see what i mean here http://cocorrinanewtemplate.blogspot.gr
the grey van bar that is fixed, should have a menu visible only when scrolled 300px (that's when the main menu is no longer visible)
You can try this.
HTML
CSS
.back-to-top {display: none; width: 30px; height: 30px; position: fixed; bottom: 20px; right: 20px; z-index: 500;}
JavaScript
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>150){
$('.back-to-top').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('.back-to-top').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
$('.back-to-top').click(function(e) {
$('body, html').animate({scrollTop:0}, 800);
});
});
You hase to use the jQuery function .scroll()
You will have to calculate where are you at in the scrolling proccess, and when you're at 300px from the top, do your logic.
I believe this script might work for you:
<script type="text/javascript">
$(document).ready(function(){
$(window).scroll(function(){
if ($(this).scrollTop() > 100) {
$('.classid').fadeIn();
} else {
$('.classid').fadeOut();
}
});
</script>
this is your problem on the blinking just remove this script and you will be fine:
<script type='text/javascript'>
$(function(){
$(window).scroll(function(e) {
if($(this).scrollTop()>200){
$('#menutest').fadeIn(1000); // Fading in the button on scroll after 150px
}
else{
$('#menutest').fadeOut(500); // Fading out the button on scroll if less than 150px
}
});
});
</script>
I have Jquery script to play navbar animation on one page and disable it on another page. it works on chrome but not on firefox. Heres my code:
var URL = window.location.pathname;
URL = URL.split("/");
if(URL[1] != 'holiday') {
$('.navbar').addClass('hide-menu');
$(window).scroll(function() {
slider();
});
} else {
$(".navbar").addClass('show-menu');
}
The slider function :
function slider() {
if (document.body.scrollTop > 500)
$('.navbar').stop().animate({
"margin-top" : '0'
});
else
$('.navbar').stop().animate({
"margin-top" : '-150px'
});
}
The CSS:
.show-menu {
margin-top: 0px;
}
.hide-menu {
margin-top: -150px;
}
Firefox hide the menu but it fail to play the animation and show the menu back. Any suggestion guys? thanks
You have to get the scroll amount from the element that actually has the scrollbar. Firefox considers that to be the <html> element.
You can wrap all your content in a container that's got overflow: auto set, and then use that as the thing to check for scroll amount as well as the place to put the scroll event handler. Here's a jsbin.
<body>
<div id=everything>
<div class=navbar>
HELLO WORLD
</div>
<!-- content ... -->
</div>
</body>
and CSS:
html, body { height: 100%; padding: 0; margin: 0; }
#everything { height: 100%; overflow: auto; }
i was working on this div animation where the original position of div from top is 70% and the div is absolute.
Now, when I click on button it slides to bottom of page with top:95%.
Now I want to check if the position is top:95% and if so, then i want to slide it back to top:70%;
Somehow the Div slides to 95% but dosent come back. what i am doing wrong here??
code
css:-
#mainMenu {
width: 100%;
height: 30px;
background-color: black;
top: 70%;
position: absolute;
}
body {
margin: 0px;
}
#clickToCheck {
font-size: 22px;
}
JQuery
<script>
$(document).ready(function () {
$('#mainMenu').click(function () {
$("#mainMenu").animate({ top: "95%" }, 1100);
});
});
$(document).ready(function () {
$('#clickToCheck').click(function () {
if ($('#mainMenu').position().top === '95%') {
$("#mainMenu").delay(1000).animate({ top: "70%" }, 1200);
} else {
alert('its not at bottom');
}
});
});
and Html
<body>
<span id="clickToCheck">Click to CHeck</span>
<div id="mainMenu"></div>
The problem is that the function
$('#mainMenu').position().top
Will return the value in pixels instead of percentage. So if you want to check if the top is 95% you will have to do the math based on the top and window height (or div height). here is the code:
$('#mainMenu').position().top/$(window).height()*100
Here you will have the the percentage of the #mainMenu in relation to the full window. If the #mainMenu is inside a div, just do based on the div's height. Also beware that you will probably get a number like 94.2343123. So when checking, I would not do and "if = 95". I would do something like "if >= 93" or something like it.
The basic problem is that .position(), .offset(), and .css() all work in pixels by default.
A reasonable workaround would be to store the the menu's original .offset() using .data() and just check to see if its offset has changed, like so:
Working Example
$(document).ready(function () {
$('#mainMenu').data('startPos', $('#mainMenu').offset().top); // when the doc is ready store the original offset top.
$('#mainMenu').click(function () {
$("#mainMenu").animate({
top: "95%"
}, 1100);
});
$('#clickToCheck').click(function () {
if ($('#mainMenu').offset().top > $('#mainMenu').data('startPos')) { // if new offset is greater than original offset
$("#mainMenu").delay(1000).animate({
top: '70%'
}, 1200);
} else {
alert('its not at bottom');
}
});
});