I want to create a menu bar that stays vertically in place when you scroll up and down the screen, but if the user scrolls left and right, i want the menu bar to move left and right with the rest of the content.
For example, if the user is on the home page and decides to scroll down to read the announcements. I would want the left menu bar to stay in place. but lets say the user zooms up on our webpage so the entire page doesnt fit on the screen. If the user decides to scroll all the way to the right side of the page, i would want the menu bar to disappear along with the other content on the very left of the page.
Is there a way to do this with only css?
I had a similar problem and I found some help and did some customizations for my own need. Check my code below:
CSS
#sidebar {
top:70px; // make it for your own
left: 0px; //make it for your own
position: absolute;
}
jQuery
var leftOffset = parseInt($("#sidebar").css('left'));
$(window).scroll(function() {
$("sidebar").css({
'left': $(this).scrollLeft + leftOffset
})
});
Related
I have a windows store app with a column of scrollable text in the center. On the top and bottom I want to have fixed widgets which do not move when scrolling.
I've gotten this to work just fine using some quite simple html
However, when the soft keyboard / touch keyboard is displayed, the bottom of the window is hidden (I would have expected it to resize) and the content is out of view until scrolled to the end. I can see how this probably works quite well for some apps, but for mine it's a disaster. bottom widgets are occluded by the keyboard and top ones scroll out of view when I scroll the center text column to the end.
Here's an imgur gallery of screenshots that show what I mean. I gave up trying to screencapture this after two hours.
Here's the source of my demo app
https://dl.dropboxusercontent.com/u/568631/ninjaScroll2.zip
I can detect when the keyboard is shown or hidden, but I can't seem to do anything about it. I can't resize the window (window.height cannot be set). I can move my bottom widgets to just above the keyboard position, but the window will still scroll when it reaches it's nadir, and then the top widgets are gone.
Does anyone have a workaround for this issue? Is there some way to control the actual window height, or stop this weird viewport scroll effect?
Once the content window has scrolled to it's maximum of 100% (hidden beneath the keyboard) the window itself then starts to scroll up, hiding the top left / top center / top right divs
I couldn't reproduce this scenario. By my side when scrolling to 100%, the touch-keyboard also cover the bottom of the window, and the window didn't start to scroll itself. I'm targeting SDK 14393.
I can move my bottom widgets to just above the keyboard position, but the window will still scroll when it reaches it's nadir, and then the top widgets are gone.
You are targeting the right direction. When the touch-keyboard is on, the window scroller is shown, so that you can scroll to the see the bottom when the touch-keyboard is on. Thus when you scroll the content to the bottom and continuing scrolling, the window will be 'pulled' to up.
So, the workaround is to adjust the position of the bottom divs in window.onscrolling:
default.js:
var windowHeight = window.innerHeight;
var inputPane = Windows.UI.ViewManagement.InputPane.getForCurrentView();
...
window.onscroll = function (evt) {
//change the position of bottom div
var myDiv = document.getElementById("myDiv");
myDiv.style.top = window.pageYOffset+"px";
}
inputPane.onshowing = function (eventArgs) {
document.getElementById("myDiv").style.height = windowHeight-eventArgs.occludedRect.height+"px";
}
inputPane.onhiding = function (eventArgs) {
document.getElementById("myDiv").style.height = windowHeight + "px";
}
default.html:
<div id="myDiv" style="position:absolute;height:100%;width:100%;">
<div style="position:absolute;top:2vh;left:2vw">top left</div>
<div style="position:absolute;top:2vh;right:50vw">top center</div>
<div style="position:absolute;right:2vw">top right</div>
<div style="position:absolute;top:50vh;left:2vw">middle left</div>
<div style="position:absolute;top:50vh;right:50vw">middle center</div>
<div style="position:absolute;top:50vh;right:2vw">middle right</div>
<div style="position:absolute;bottom:2vh;left:2vw">bottom left</div>
<div style="position:absolute;bottom:2vh;right:50vw">bottom center</div>
<div style="position:absolute;bottom:2vh;right:2vw">bottom right</div>
</div>
Notes: To simplify the problem, I use a div to wrap the fixed content. And adjust the position by changing the height of the div.
And here is the link to complete demo: ninjaScroll2.
I'm looking at a 'drag and drop' script which works for my needs, but I have a couple of problems with the DIV positioning and getting a DIV to be fixed but allow to expand it's parent.
I've created a CodePen example.
Basically I have a list on the left of the page which may grow or shrink. That div expands and contracts correctly.
One the right of the page I have a dropzone the users can drag from the list and fill up the drop zone.
If the list is longer than the page, when the user scrolls down I wan to have the right pane (outlined in YELLOW) to scroll down the page with it. When the user scrolls up I want the YELLOW pane to scroll back up and eventually arrive back at it's original location.
As items are dragged from the left to the right the YELLOW pane expands. But it expands over the DRAG DIV, it should make the drag div expand so the YELLOW pane stays with in it.
Please some one advise how I get this to work.
Thanks :)
add padding to this
#right_container {
padding: 20px;
}
delete position
#right {
position :absolute;
}
what am I misinterpreting this..
I am developing a parallax website, and in one page(div) I have a some images in another div like
<div> //page which fits in window
<div> //inner div which will be on left side, and this needs to be fixed positionwhile scrolling
Some content....
</div>
<div> //inner div it will be on right side with 4 small images, this div should move from bottom to top while scrolling
<img></img><img></img><img></img><img></img>
</div>
</div>
So to tell shortly, I have a page with two divs, in which I want to move only one div and another should be fixed.
As seen in picture Vision div and background should be fixed and only four images in the right side should move from bottom to top while scrolling.
Once the second div scrolled to top, then I will move the page and show next page.
Any ideas???
Created a fiddle for you here: https://jsfiddle.net/svh8owgz/
In answer to your questions: fixing an image regardless of scrolling can be done with the CSS with position: fixed.
So in my example - I created the div with class companyInfo and styled it:
.companyInfo {
position:fixed;
top:0%;
left:2%;
width: 200px;
height:200px;
background-color: blue;
}
Which would be the part where it says 'Vision' in your image.
Then as for the thumbnailcontainer - that's just got a relative positioning within the overall container:
div.imageContainer {
position:relative;
left: 400px;
width: 200px;
top:400px;
}
That's pretty straight forward: I will just move as expected ( at least - if the page container is larger than the screen height and scrolling is possible to begin with ).
Then you mentioned 'Once the second div scrolled to top, then I will move the page and show next page'
What you could do is use the jQuery.appear plugin to check whether elements come into visible range or not. What I did was add a div with id pageTrigger below the actual page container. That means you can start listening to events of users scrolling to the bottom of you page:
(function ($) {
$('#pageTrigger').appear();
$('#pageTrigger').on('appear', function (event, $all_appeared_elements) {
// Trigger page change
alert("page change triggered");
});
})(jQuery);
Be sure you reference jQuery and jQuery.appear in your page otherwise this will not work. Also - I couldn't find a nice HTTPS CDN for this plugin so I had to include the source - sorry for that.
here's what I want. I want a top bar AND navigation menu attached to the bar. I've done this no problem. I want to bar and the navigation menu to follow me if I scroll up and down.I can do this with a position fixed. but, if i have a fixed position, then when i scroll left to right, they follow.
I want to have both the top bar and the navigation menu follow as the user scrolls up and down but if they scroll left to right i want it to act like an absolute position, and become partially or completely hidden (depending on how much the user scrolls).
Is this possible? I've seen a couple of topics but haven't been able to get it to work for me.
Here is my jfiddle http://jsfiddle.net/kyleseitz/rX4Vh/11/
I want EVERYTHING to move down with me when I scroll down and back up when I scroll up. But, if i get a horizontal scroll bar, I want to pass the viewing window over it.
I found the javascript on a previous question but i can't get it to work for me.
.slim {position: absolute;}
<div id="phantombar" class="slim">
<!--I Technically don't need these if they are not neccessary-->
<div id="phantombar" class="fixed_elem">
<div id="headWrap">
ScrollToFixed is a jQuery plugin that used to fix elements on the page (top, bottom, anywhere); however, it still allows the element to continue to move left or right with the horizontal scroll.
Website: https://github.com/bigspotteddog/ScrollToFixed
Demo: http://bigspotteddog.github.io/ScrollToFixed/
try to use this. Maybe works :
$(function(){
var elements = $('#ptm, #spt, #support, #act, #left_nav');
elements.css('position', 'absolute');
$(window).scroll(function(){
if($(this).scrollLeft()){
elements.removeAttr('style').css('position', 'absolute');
}else{
elements.removeAttr('style').css('position', 'fixed');
}
});
});
elements can you add more, depending on needs.
I'm working on this web application that manages a DB.
Everytime I go to this certain page that has a big list, the vertical scroll bar appears on the right side of the browser.
That, however, makes my whole page move to the side by a bit.
It is most noticeable if you look at the horizontal menu bar I have at the top of the page.
Is there anyway to overcome this?
Thank you.
You can enable the scrollbar to always be shown by applying the following to you body: overflow-y:scroll;
body
{
background:#DDDDDD;
overflow-y:scroll;
}