I just installed buddypress on my wordpress powered website and I would like to prevent the admin bar from following the screen as you scroll down. How can I make it stay stationary at the top of the page and allow it to go out of view as you scroll down?
Thanks for any help.
Without knowing anything about how they implement it... Items staying put in the window can be handled through css with a position: fixed; top: 0 type syntax. Changing the position to absolute is probably the most straightforward change; it will change to just being stuck along the top when scrolled to the top instead of stuck along the top always. Or there are a number of ways to do it through javascript. Do you know how it's working? Try inspecting the element in a browser (firebug in firefox or chrome) and checking what css rules are applied to the header. Or post a url, at least.
Related
I am trying to perform a scrolling effect.
On scroll, the next page section should cover the current one.
So the current section is docked to the top of the screen and while the next section arrives the current is progressively covered but doesn't move.
Basically I am trying to reproduce the effect I found on this website:
http://www.squarespace.com/seven/interface
It works only with css (I tried with js disabled)
I've tried to reverse engineer it but I am not successful so far.
If someone had so advices I would greatly appreciate.
Main idea is that every <section> has height and position: relative and 'overflow: hidden'. But every tag inside those sections has position: fixed.
I tried looking at the site with JavaScript turned off and got nothing but a blank screen and a scroll bar (same in Chrome, Firefox, and Safari/iOS). Furthermore, Chrome tells me that all kinds of functions get called as you scroll. Unless there is some serious trickery here, squarespace.com seems to be using JavaScript.
Though you may be able to pull of something like the checkbox-hack to set and/or animate the top of different sections, I don't think the result for the minority of users validates the development time.
I put together a small fiddle which should help you on your way if you want something like the website you linked to. Notice that this is still usable if you disable or comment out the JavaScript.
https://jsfiddle.net/kx94my17/1/
I just completed my website using WordPress 'Theron'Lite' theme.
I have added a customized scroll box into my pages. The theme looks great on my PC, however, on my mobile device, the scroll box is too wide and runs off the page, so the user has to move the page over to the right (basically has to scroll "out of the website") to read all of the information in the scroll box.
I tried fixing several of the 'widths' coding to "100%", but with no success. I certainly don't mind posting the HTML from my .css, I'm just not sure if the problem resides in my style.css or mobile.css. Or even the scroll box HTML that I placed into my individual pages is the culprit. Either way, something's screwed up here.
Any ideas? I greatly appreciate any help in this matter!
When using the 100% width you might try adding !important after wards to allow that to overwrite any other css that potentially could be affecting the scroll box.
Something like this:
.scrollbox
{
width: 100% !important;
}
Otherwise, could you at least post a URL to the site?
I have been at this for 10 hours straight, I have tried different types of positiong, but it's just not working. I can't replicate this interesting effect where you scroll down the page and the navigation changes from a transparent background, to a white background. The example can be found at http://www.bakkenbaeck.no/ Can anybody point me in the right direction?
TL;DR This effect is accomplished with not only HTML and CSS but also needs some JS to pull this one off.
I am guessing a little bit as to what you are referring to specifically on that example you gave but I will assume for this post that you are referring to the change that happens once the user scrolls down past the initial full height image where you see the logo change from white to gray and the background of this nav area turns white.
Not knowing your skill level/knowledge its a bit tough to make assumptions about what is going to give you direction, but I'll try my best. What is happening here is the creative use of CSS z-index, some javascript, and duplicate menus. If you think of a web page as a stack of paper, then the first piece of paper is the menu which is on top of the second page, the opening image, then the third page, the the next (duplicate) menu. The duplicate menu is positioned exactly under the first menu. As you scroll down you remove that middle image layer and the new navigation is exposed via some JS. There is a page scroll event listener (javascript) that is checking where the page is currently scrolled to. Once the user reaches the point where the logo and navigation need to start changing, the javascript kicks in and starts to set the height of the first navigation to 1px smaller for every 1px past the scroll point you've gone all the way until it gets a height of 0px effectively hiding it. If you take a look inside of chrome web tools by inspecting both navigations, you can see this happening (the height of the navigation shrinks) as you scroll.
I can see that the site is using http://pagescroller.com/ which is probably the plugin they are using to trigger the height adjustments I was describing.
Hope that gives you some direction!
Reaserch Paralax scrolling if you not familiar with js there are numerous tutorials online and you will find it very easy if you follow them step by step here are some that I have used:
http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/
It's really easy don't let jQuery intimidate you there is plenty examples on google!
I'm trying to develop an horizontal scrolling for a landing page. I'm trying information that I found here. But I want to make something similar, but not exactly that...
In that Web page, we have two elements:
We can see we have a menu, and an horizontal list of boxes. This list works as expected: if you press on a link on the menu, it jumps to the correct box. If you go to a mobile browser, it scrolls right and left using your hand.
But, when you scroll right with the mobile browser, the menu on the top, stays at the left of the layer, disapearing from the visible part of the Web. If you do so with a computer browser, the menu stays always at top left.
I want the menu to always stay at top, even if I'm using a mobile browser, so I can scroll, let's say, some images, without hiding left the content of my Web Page.
How can I do so?
I hope I explained myself correctly.
If you also think there's an easier way to make a scroll horizontal, I'm open to suggestions.
PS: I want a kind of result like this:
Mobile browsers have issues with fixed positioning - see this article which also provides a list of JavaScript Solutions.
I am working on our new corporate website. I took over for someone else. I just resized the IE8 window to make it smaller and the left side of my page is cut off. I get a scroll bar at the bottom of the window, but it won't let me see part of the left side of the page. There's nothing weird about the site. It's html with some javascript and a couple of stylesheets that were created by the previous developer.
Is there any way I can prevent this from happening? Or force the bottom scroll bar to allow me to go all the way to the left side of the website?
Check for some rules in CSS styles with margins set to negative values. Probably the positions of your containers got messy after you change the size of the window.