I've got a mobile website that has a navigation menu that is displayed on click of a fixed position button in the top right. This menu is also fixed so that the top of the menu starts 10px below the bottom of the button. The problem is that this navigation menu can be longer than the height of the device being used, and when you try and scroll it will scroll the content behind the navigation menu seeing as it is fixed. Can someone help me get around this?
As per my comment:
You need to use JS to find the height of the screen, top of the menu and set the max height of the menu to the difference of these
For the height of the window use $('window').height()
For the menu's distance from the top of the browser: $('.menu').offset()
The function should live in the show menu event listener:
var maxHeight = $(window).height() - $('.menu').offset();
$('.menu').css({ "max-height" :maxHeight})
Make sure that overflow:scroll; is set on your menu
What you need to do is put a div with a class (I chose scrollable) inside the navigation menu that has the scrollable content and then set the css for that div to be something along the lines of :
div.scrollable{
overflow : auto;
position : relative;
}
That way, the div (and the inside content of the navigation menu) will be scrollable while the position overall of the menu remains fixed.
Related
i need like in this example website in mobile view https://www.regus.com/en-gb/virtual-offices
In mobile view on page scroll (option, whats include) div set a fixed and overflow-x scroll
what i need is while page scroll it is find the anchor active section and move the sub nav title to center or move to left. so i need the solution for this.
i found this for onclick function
$('classname').on('click',function(){
var pos=$(this).position().left; //get left position of classname
var currentscroll=$("classname").scrollLeft(); // get current scroll position
var divwidth=$("classname").width(); //get div width
pos=(pos+currentscroll)-(divwidth/3); // for center position if you want adjust then change this
$('classname').animate({
scrollLeft: pos
});
});
but i need solution while page scrolling like in this site https://www.regus.com/en-gb/virtual-offices
Thanks In Advance.
My goal is to have two sidebars on the left that are fixed and collapsible, and having the main content on the right to "follow" the sidebars when they collapse/expand.
Illustration of the possible positions for sidebars and content:
But let's proceed step by step.
I want a fixed sidebar on the left that is collapsible, and the main content (on the right of the sidebar) to be expanded when the sidebar is collapsed.
The thing here is that the sidebar has a fixed position, so the content on its right has to be pushed right (with a left margin) to avoid overlap.
I know the width of the sidebar so it's not a problem to play with CSS/JavaScript, and I have a working example here: https://jsfiddle.net/Pawamoy/yamm7eLh/2/
Basically, when you click on the sidebar (bottom part), active class is toggled on the sidebar and expand class is toggled on the content. These classes will change the width of the sidebar and the left margin of the content.
$(document).ready(function() {
$('#sidebar').on('click', function(e) {
if ($(e.target).is("#sidebar")) {
$('#sidebar').toggleClass('active');
$('#content').toggleClass('expand');
}
});
});
I want to add a second fixed and collapsible sidebar, at the right of the first one.
But playing with toggled CSS classes will not be enough since I need to calculate which sidebar is active or not, to be able to set the left margin of the content. The left margin would be 160px when both sidebars are collapsed, 320px when only one is collapsed, and 500px when none are collapsed. Not only that but the second sidebar itself needs to be pushed back and forth on the right depending on the first sidebar width.
Solution as I imagine it: the content could just "follow" the element on its left (the second sidebar), without changing its left margin value. Is there a way to do that, knowing that both sidebars are fixed (they stay at the same position on the screen when the user scroll the main contents)? In other words, how can I position the second sidebar relative to the first one, and the content relative to the second sidebar, and at the same time have both sidebars "fixed"?
I solved this by thinking with boxes. Instead of trying to accomplish complex resizing between three side-to-side elements, I used one more layer of div. See the idea on the image below: on the left is what I was trying to do. On the right is how I solved it. I even managed to add a fixed navigation bar. I just took what I already had and used it a second time in a sub-div.
The key here is to NOT specify the left CSS positioning value for your fixed elements. Here is the updated fiddle: https://jsfiddle.net/Pawamoy/yamm7eLh/3/
I have dialog box which comes on clicking a button. In the dialog box i have a button and other content. I want to make that button position fixed inside dialog pop-up.
$(window).bind('scroll', function() {
if ($(window).scrollTop() > 50) {
$('#footer_buttons').addClass('sticky');
}
else {
$('##footer_buttons').removeClass('sticky');
}
});
<style>
.sticky{
position : fixed;
}
</style>
I used above code to make the button position fix, it worked outside the dialog box but not working when the same code is used inside the dialog box. I can make a button fix by adding a min-height to dialog and make the dialog content scrollable. But I don't want to add any scroll to the content inside dialog box.
Can any one help me out. Thanks in advance
From MDN CSS position property:
fixed:
Do not leave space for the element. Instead, position it at a specified position relative to the screen's viewport and don't move it
when scrolled. When printing, position it at that fixed position on
every page.
So it doesn't matter where your element is. If you apply the fixed position, the top, left, right, bottom values are relative to the screen's viewport (visible area in browser).
In your case you should use absolute positioning and set the position using two of the four positioning properties: top, right, bottom, left. Don't forget to add position: relative or absolute to the modal container.
Description :
I have a div with width: 100% of the body and is sicked to the top of the page.
Now when I start scrolling I want the div to hide itself when it is no longer the part of visible page after scrolling e.g slideUp "But" when I start to take my cursor near the top of my page the div should re-appear when the cursor is at certain distance from the top of the page
Now I could use the following demo code
$(document).on("scrollstart",function(){
alert("Started scrolling!");
});
but then
1) I dont how to detect if the div is out of the visible page after scrolling
2) and how to detect the y-distance of the cursor from the top of the page...
any one??
Just an idea:
1. Try getting offset of scroll top and compare it with the height of div that you want to hide (if div height is less than scroll top, hide it)
2. Maybe you can get cursor position using something like this: http://api.jquery.com/event.pagex/
So in my portfolio which is at http://wrobbins.me/new if you click a portfolio piece the #headerwrap expands to the window height. A group of 'showcase' is then loaded into the #job-display. I want to disable the main page's scrolling, and have the showcase be scrollable so the information wont be cut off (as you can see is happening now). This is what I'm using to expand the #header-wrap on click.
var viewport = $(window).height();
$('#header-wrap').animate({height: viewport}, 700, function(){
$('#job-display').load("content.html#" + job, function(){
$('#job-display').fadeIn(700);
jcheck = 1;
});
});
In addition, when a portfolio piece is clicked on the site, the page jumps up to the top of the page and then expands the header-wrap. How would I go about stopping it from jumping?
To make the div scrollable you need to specify a height to #job-display. for example
$('#job-display').height(500);
To remove the page scroll ,You have specify overflow-y : scroll for html tag. You will need to make it as overflow-y : hidden