I'm coding a "return to top" button that should be visible only when the user scrolls down my web page, and be hidden when the user scrolls up.
The rule is like this:
if the page scrollTop is > 100px then the button is shown
if the page scrollTop is <= 100px then the button is hidden
When running that page with Safari on iOS9 (iPad mini) the button shows only when the scroll animation has ended, however it hides immediately when the scroll up reach the scroll limit.
You can see a sample of the way I do it here:
http://jsfiddle.net/jkwqq59a/
HTML:
<div class="container">
<div class="box"></div>
</div>
CSS:
.container
{
position: relative;
height: 3000px;
background-color: blue;
}
.box
{
display: none;
position: fixed;
left: 50px;
top: 50px;
width: 50px;
height: 50px;
background-color: yellow;
}
JS:
$(window).on('scroll', function()
{
if ($(window).scrollTop() > 100 && !$('.box').is(':visible'))
$('.box').show();
else if ($(window).scrollTop() <= 100 && $('.box').is(':visible'))
$('.box').hide();
});
My question is: on iPad why do the button shows only AFTER scroll down is finished when it hides immediately on scroll up? How can I make it shows immediately, like it does with any web browser on my Mac?
I had the same issue before and my fix was not having a fixed position container into a fixed position container. Meaning by this that fixed elements alone work fine, but not nested.
Related
I am creating a movie app. I am facing some problem on implementing the scroll bar.
While scrolling I want the header div to remain where it is. I don't want it to disappear while scrolling down. But the div located vertically bottom to the header must be scrollable.
This can be found in amazon.in
On searching Harry Potter, this page loads
On scrolling down, you can see that the header remains fixed.
How can I implement this in React?? Please share the necessary code/documentation. Thanks!
This actually has nothing to do with React. This has to do with basic HTML and CSS knowledge.
Here is my preferred method:
<div id="navbar">...</div>
<div id="content">...</div>
#navbar {
position: fixed;
top: 0;
left: 0;
right: 0;
}
#content {
margin-top: /* size of navbar */ 50px;
}
You can add scroll bar in a div by using overflow property with some height.
CSS:
float:left;
width:1000px;
overflow-y: auto;
height: 100px;
HTML:
<div class="ScrollStyle">
Scrollbar Test!<br/>
Scrollbar Test!<br/>
</div>
I'm trying to disable scrolling on a web page when an user open a popup (but he can scroll it).
The popup element has following attributes:
#popup {
display: none;
width: 100%;
height: 100%;
z-index: 10;
position: fixed;
background-color: #3F3F3F;
overflow: auto;
left: 0;
top: 0;
}
And when the user opening a popup, the following code is called:
$('#popup').show();
$('html').attr('style', 'overflow: hidden;');
$('body').attr('style', 'overflow: hidden; position: relative;');
This solution perfectly work on a desktop browser, but unfortunatly not on mobile.
On mobile, it always possible to scroll (but the scroll speed is slow).
How can I disable also scrolling on mobile browser?
Thanks in advance.
Change body position to fixed. That will disable the scroll.
I'm currently working on a new web project which is a horizontal scrolling portfolio site. I'm almost done, there is just one piece of code that won't work like its supposed to.
I've got a burger menu in the top left of the screen that contains anchor links that are supposed to smoothly scroll to the referenced id. Problem is that as soon as you scroll the page, the scroll distance gets messed up and the scroll distance gets totally messed up.
Here is the link to the page: http://www.timbrack.de/#portfolio
To reproduce the error hit the burger menu and click on 'about' it will just scroll backwards for a couple of pixels even though about is on the right of the portfolio section...
I use white-space: nowrap for the containers to fit horizontally like this:
body {
overflow-x: scroll;
overflow-y: hidden;
white-space: nowrap;
height: 100%;
width: auto;
position: relative;
}
.content_container {
display: inline-block;
vertical-align: top;
height: 100%;
padding: 100px 100px 100px 100px;
box-sizing: border-box;
position: relative;
min-height: 500px;
vertical-align:top;
}
the piece of script for scrolling looks like this:
$(".scroll").bind("click",function(event){
var $anchor = $(this);
$("body").stop().animate({
scrollLeft: $($anchor.attr("href")).offset().left
}, 1200);
event.preventDefault();
});
Do you guys have any idea why the scrolling distance gets so messed up?
Cheers
Tim
I created some sliding menu and all works great without one small problem. When I slide the menu, I'm automatically transported to the top of page (the slide effect works good, but why I'm transported to the top of page when I try to open the menu, when I scrolling page, when I'm not of the top?)
Position of the menu is fixed, so I can slide it when I'm in the center of page, for example.
So in short: I want to slide my menu without automatically jumping to the top of page (when I do it).
Code of js:
<script>
jQuery('.arrowleft').click(function () {
jQuery(".other_sidebar_background").css("display", "block");
jQuery(".other_sidebar").toggle("slide");
});
jQuery('.back_sidebar').click(function () {
jQuery(".other_sidebar").toggle("slide");
});
</script>
My menu is showing when I click image in .arrowleft div (and hiding when I click image in .back_sidebar div). .other_sidebar_background and .other_sidebar it divs of my slide menu.
.other_sidebar {
z-index: 999999 !important;
display: none;
background: rgba(21,21,21,0.98);
z-index: 9999;
height: 100%;
position: fixed;
width: 270px;
padding: 10px;
}
.other_sidebar_background {
display: none;
background: #2c2c2c;
}
The divs (back_sidebar and arrowleft) were between tags and the link "#" caused the problem.
I fixed it by changing the <a href="#"> to <a style="cursor: pointer;"> (I wanted a cursor link).
The website displays fine on all resolutions, the problem arises when the window is resized.
So what I have done is create 5 div containers and given each container 20% width within a body of 500% width. Below is one of them
<div id="workslide" class="container">
//some a tags goes here
</div>
CSS
.container {
bottom: 0;
float: left;
height: 100%;
margin: 0;
position: relative;
width: 20%;
}
Within each container is an img slide which is set in css background-size: contain; which scales correctly for all resolutions. When the window is resized from the left, for example, this happens. The previous div bleeds in :
Any ideas would be appreciated !
I implemented a fix for the problem after the pointer from Matt. Works perfect now:
//added following lines of code within document ready:
$(window).resize(function() {
$(window).scrollLeft($(/*element you have scrolled to*/).offset().left);
});