I am currently working on a simple (or so I thought) slide-down menu for both the desktop and mobile versions of a website I am working on. I'm trying to do this in CSS only if possible. Currently the CSS I am using is as follows:
#menu {position: absolute; top: 0; left: 0; width: 100%; max-height: 50px; overflow: hidden; -webkit-transition: all 1s ease; /* For Safari 3.1 to 6.0 */ transition: all 1s ease; padding: 4px; }
#menu:hover {max-height: 75%; overflow: auto}
The reason I have the 'overflow: auto' when on a smaller screen is due to the entire menu not showing when on a smaller screen - even when I have some elements not showing on mobile screens.
The problem I'm running into is when it DOES overflow and the user scrolls through the menu, when they click/hover out of the menu it retracts like it should but it doesn't show the top of the menu anymore, it will show wherever they scrolled to.
I'd like to find a way either via CSS or Javascript to automatically have that div scroll back to the top when the user clicks/hovers out of the menu so it will still show the menu icon + logo instead of random menu text.
I love how it works but can't stand the scrolling issue on smaller screens.
There may be some awkwardness in your idea that might just need a redesign, I certainly have never noticed a menu working like this.
But the jQuery code to scroll to the top is this:
$("html, body").animate({
scrollTop: 0
}, 600);
Where 600 is how long it takes in ms.
You'll have to wrap this in a click() function or something so it triggers when someone presses a menu option.
For example:
$('#menu a').click(function () {
$("html, body").animate({
scrollTop: 0
}, 600);
});
And of course all of this code should be wrapped in a $(document).ready() (basic jQuery setup)
I know you didn't mention jQuery in your question, but this is a popular approach to solving problems like this.
There is another way to achieve auto scroll on click using html only.
You just need to add an id to some div (the header maybe) and on the link you pass the #id to the href like so:
html
<div id="Header">your header</div>
Go to the top
css
/* Keyword values */
scroll-behavior: auto;
scroll-behavior: smooth;
I'd suggest to try out the scroll-behavior: smooth; it makes the transitions, well... smooth :D
Here you can find all the documentation you need about this solution
https://developer.mozilla.org/de/docs/Web/CSS/scroll-behavior
Related
I am tryng to fix a css bug for mobile screens
when I click section 1 content opens and if i move till the bottom of the section one content and after that if I click section 1 content closes.
but I dont see section 2 after that I see section 3 since the screen moves upwards.
how to retain the section 2 in our screen.
am I doing anything wrong with the scaleY property.
providing the related code below
I used scrollIntoView but still not point to second one any idea???
I used window.scrollTo(0, 0) but still not point to second one any idea???
.television .chromecast .sun .sunItem > .bulb {
overflow: hidden;
transition: transform .5s, max-height .5s;
transform: scaleY(0);
box-sizing: border-box;
max-height: 0;
transform-origin: center top;
}
.television .chromecast .sun .sunItem.selected > .bulb {
transform: scaleY(1);
max-height: 100%;
}
We need to invoke properly on the select function
onSelect() {
this.props.onSelect(this.props.id);
this.focusDiv();
}
That's the expected behaviour. The scroll position is retained but you remove content from the top of the screen so you end up further down in the page.
It's always a bad idea to collapse the previous elements when expanding a new one, especially on mobile.
To fix that, you will need to script a scrolling to the top of the open section. That could easily be achieved using jQuery.ScrollTo() or something similar, but to be honest, I would just leave the previous sections open, unless the users have a tendency to scroll back up and that would require to much scrolling to get back to the top of the page. Other UX solutions like a scroll to top link might come in handy to solve that.
I tried to find a solution here but couldn't find it.
I'm working on this responsive design page. On mobile, when you tap menu, the main content div gets pushed aside (via Javascript) to reveal a left-fixed menu underneath. Everything works pretty fine except that when you see the webpage on a computer browser (resided to mimic mobile), open the menu and then expand the browser window till it hits the "desktop" breakpoint, the main content div remains pushed aside.
Is there a way to reset the position of the content (main) div when maximized to the desktop breakpoint? I've tried many alternatives to no avail.
Here's a jsfiddle link with the page: https://jsfiddle.net/luchosoto/wad3pmn0/1/
CSS for the main content div:
#main {
top: 0;
bottom:0;
width: 100%;
position:fixed;
overflow-y:scroll;
-webkit-overflow-scrolling: touch;
overflow-x:hidden;
z-index: 2;
transition: 500ms;
box-sizing: border-box;
}
Javascript that pushes main div aside to show menu:
var counter = 1;
function toggleNav() {
if (counter == 1){
document.getElementById("main").style.transform = "translateX(60%)";
counter = 0;
}else{
document.getElementById("main").style.transform = "translateX(0%)";
counter = 1;
}
}
Thanks in advance.
While Zack Kirby's answer sounds logical and ntgCleaner's comment is very useful, you could also add this CSS which forces the main div position to where you want it: JSFiddle
#media screen and (min-width: 801px) {
#main {
transform: translateX(0) !important;
}
}
Since you are using javascript to move the div, you will also need to use javascript to move it back. You'll need to do that with a window.onresize listener. You can use something like this answer to achieve that.
I've got a twitter bootstrap parallax template (purchased) - specifically regarding the nav bar, the way it currently works is when you click a nav menu item, the nav bar scrolls up with the rest of the site, then reappears further down the page and remains fixed at the top. What I'd like is for it to not scroll up in the first instance, and just remain fixed at the top the whole time.
This is the site in testing:
http://realestatemediafactory.com/test/
One thing I did try was wrapping the entire nav bar in the code below:
<div data-spy="affix" data-offset-top="160">
But the result was messy, and I figured it better to switch off/modify the code causing the scroll rather than try to cancel it out with more code...
Unsure whether this is controlled by css or jquery, so have not copied any of my code here... whatever's needed I'm happy to paste here.
Thanks guys!!
I don't know if I understand correctly your question and if this will help you
With firebug I tried to edit the css code
Search in your css code this selector and try to modify it so
.navbar-fixed-top .navbar-inner, .navbar-static-top .navbar-inner {
background: url("../img/line_bg.png") repeat scroll left top rgba(0, 0, 0, 0.3);
border-bottom: medium none;
box-shadow: none;
filter: none;
padding-bottom: 10px;
padding-top: 10px;
position: fixed;
transition: padding 0.5s ease-in-out 0s;
width: 100%;
z-index: 1030;
}
With this modification, the navigation bar should always remain fixed at the top
Again: i've only tried with firebug so I'm not sure of the result
If this solution does not suit your needs, i apologize for making you lose time.
Mate thank you very much for your help - I did try that and it solved the problem for the most part, but there was still a positioning issue. I actually found there were two css classes for the header, one fixed and one scrolling, which were controlled by a script which switched between them depending on the position of the page. I turned off the script and that has solved the problem. The script I switched off is below. Thanks again for your help!
<script>
var navbar = jQuery('#navbartop');
var navbartop = jQuery('#topnavbar');
jQuery(window).scroll(function () {
if (jQuery(this).scrollTop() > 640) {
navbar.addClass("navbar-scroll");
navbartop.removeClass("navbar-static-top");
navbartop.addClass("navbar-fixed-top");
} else {
navbar.removeClass("navbar-scroll");
navbartop.removeClass("navbar-fixed-top");
navbartop.addClass("navbar-static-top");
}
});
</script>
I'm using jQuery-1.10.2 and I am using the function $(window).scroll. The $(window).scroll isn't being executed as I scroll on a mobile device, but rather when my finger releases the screen after scrolling. $(window).scroll is also delayed on IE10.
I use $(window).scroll to make a navbar scroll with the page by changing the css property top: on the position:fixed; navbar. When scrolled down for enough, the navbar ends up sticking to the top of the page as position:fixed. Is there a more compatible alternative to achieve the same results to my navbar? Is there a fix for mobile or IE10?
$(window).scroll(function () {
$('.navbar').css('top', Math.max(0, 350 - $(this).scrollTop()));
var scroll = $(document).scrollTop();
});
Here is a fiddle with no images. Look at the navbar. http://jsfiddle.net/93tzq/
If I'm understanding what you want to do correctly I'm pretty sure you're over thinking this.To keep a nav element at top while you scroll you don't need any js. All you need to do is set the z-index and position accordingly.
For instance:
.nav-overlay{
position: absolute;
top: 90px;
left: 10%;
z-index: 100;
display: block;
width: 50px;
height: 50px;
}
Then put the html as follow:
<nav class='nav-overlay'>
NAV BAR HERE
</nav>
You didn't specify your mobile browser, but this is a common question with Safari in iOS. MobileSafari does not trigger window.scroll until the scrolling has finished – this has been a problem addressed numerous ways (see iscroll, for example). Here's a similar post that may answer your question as far as making a sticky navbar.
I found this great plugin called onepage-scroll, which meets my needs, except for one thing. Some of my pages (<section> tags) can be larger than one screen. How can I customize it so that it only scrolls when it finished the "regular" scrolling, inside the section ?
I tried to change the css rule :
.onepage-wrapper {
width: 100%;
/*height: 100%;*/
height:200%;
display: block;
position: relative;
padding: 0;
-webkit-transform-style: preserve-3d;
}
but it still scrolls to the next page, with one scroll movement.
I'm trying to make it scroll to the bottom of the section (height > 100%), then scroll to the next page.
Any help will be appreciated. Thanks !
You may want to use fullPage.js instead. There's an option called scrollOverflow which allow you to have scrolling inside section as you can see in this example
While it's a less ideal solution, we ran into the same issue and found that using an iframe works with jquery onepage scroller as a solution for providing this.