I'm working on a new HTML5 CSS3 template which features a parallax scrolling header, as well as sticky navigation menu and a scroll to top link.
I've gotten the elements working individually, however, there are a few CSS rules for the parallax header which are breaking the sticky navigation and scroll link, and it's doing my head in!
The CSS rule:
html {
height: 100%;
overflow: hidden;
}
Breaks the ability to use Javascript/jQuery scroll events
$(window).scroll(function() {
alert("Hello!");
});
Never fires the event, but commenting out the CSS rules and it works.
Secondly, the parallax effect requires the CSS perspective rules set, and these seem to break position:fixed
body {
-webkit-perspective: 1px;
perspective: 1px;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
These rules prevent any element from being position:fixed, such as the sticky navigation and the scroll to top link.
I'm looking for solutions which allow for all three elements to work together. I'd rather try and avoid doing the parallax in jQuery changing the background-position property, but if that is the only way then that's what I'll have to do.
Open to any suggestions.
I've a working example on CodePen to play with - https://codepen.io/timtrott/pen/vZVOwq
I've left the rules commented out so you can see how the sticky nav and scroll to top links work. Uncomment the rules and the header work nicely, but not the navigation or link.
Thanks in advance for any suggestions :)
Updated:
Change it from:
header::before {
position: absolute;
}
to:
header::before {
position: fixed;
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
}
-moz is for Mozilla;
-webkit is for Chrome.
Hope it should work.
Related
This is my first question on stack exchange so feel free to let me know if I haven't included enough information. I've looked for a solution to my particular issue and found nothing relevant so here goes...
I'm trying to achieve a sidebar navigation that slides in upon a menu button being pressed. The rest of the page should slide with it so it flows smoothly. I have used some simple javascript to toggle on/off a .active class for the navigation sidebar div and the content-wrap div. For reference, this is what I'm trying to do: http://antrikshy.com/. The transition property is applied to both the sidebar div and content-wrap element but is only affecting the navigation bar. After inspecting the webpage, I can see the css properties have been applied to the content-wrap element successfully, but they don't work. This has been tested in safari and firefox with no change in results.
See the Pen sidebar transition example on CodePen.
Here is the individual css on the content-wrap:
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
}
You need to define both sides of the transition. If you are transitioning on left you need the left attribute of 0 so the transition has a starting point.
.content-wrap {
position: relative;
transition: all ease 2.5s;
padding: 10px;
overflow: auto;
left:0 /* THIS */
}
On my browser that fixes your pen -- https://codepen.io/anon/pen/EvKQxR.
I'm trying to make the color of the navbar change after scrolling down but when I do it doesn't work.
In my page I have first the code for the navbar and then a div where inside of it there's a video canvas with a parallax scrolling down effect.
I assumed it's not working because there might be some interference between the navbar and the parallax code. That's because when I tried to remove the parallax code it was working properly.
The fiddle of my code with the parallax effect. If you remove the parallax part it works as it should.
Your jquery is perfectly fine. The reason it works when you remove the parallax is actually due to removal of overflow properties from the .parallax class in your CSS. Since you have a fixed navbar, this is creating the interference you were mentioning.
.parallax {
perspective: 1px;
height: 100vh;
overflow-x: hidden; //remove
overflow-y: auto; //remove
width: 100%;
}
Remove the overflow properties and it should work fine.
I'm developing an cordova app with 3 "pages". The "pages" are divs with a fixed height and the with of 100%. (see div1, div2, div3 in the picture)
I'm currently using jquery show and hide functions with a slide but the performance on mobile phones is very bad. So I thought of using css, I cant get an idea of how to make is so you can swipe the current visible div to sort of snap the next div in place.
Maybe this picture wil clear my story up: picture
I hope someone can push me in the right direction css and javascript wise..
You should still use jQuery Mobile to detect swipe left/right events on each div, but instead of animating div's position, you should add/remove class for the previous/active/next DIV. Classes should look something like this:
.container {
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 100vh;
transition: all 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940); // this will add nice inertia effect upon switching DIVs
}
.container.previous {
transform: translateX(-100%);
}
.container.active {
transform: translateX(0%);
}
.container.next {
transform: translateX(-100%);
}
I am trying to create and facebook like panels so tried to use Panels from JQuery mobile link
then i make the header and footer position to fixed and disabled the data-animate.Know the issue is when i open/close the panel its flickers is also applied ui-panel-wrap-content position to fixed when panel is opend and position to absolute when panel is closed so only the panel can be scrolled and not the page content.
Can any one tell me how to stop flickering.
Any idea is appreciated.
Thanks in advance.
Add this css
.ui-page {
-webkit-backface-visibility: hidden;
}
You can try by using the following code
.ui-page * {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
transform: rotateY(0deg);
}
ui-mobile-viewport-transitioning,
.ui-mobile-viewport-transitioning .ui-page
{
overflow: visible;
}
Also add the following code in manifest file
android:hardwareAccelerated="false"
Hope it will help.
You can preload the side panel content. This smooths the transition and removes any delay in loading the panel. This then means the white background never shows.
I'll update later with the code required to do the preload.
I am currently working on an iOS webapp and have run into an odd issue. I use -webkit-overflow-scrolling: touch; to make a scrollable DIV which works great however when I update the DOM in combination with a scrollup effect in CSS the content is no longer viewable when scrolling down. It 'knows' the height of the content as scrolling is unaffected however nothing below the current view is actually viewable and seems to be cut off. Does this make any sense? If so, any ideas as to what might be going on?
Here is the 'scrollup' effect:
#-webkit-keyframes slideup {
from {
-webkit-transform: translateY(100%);
}
to {
-webkit-transform: translateY(0);
}
}.favup {
-webkit-animation-name: slideup;
-webkit-animation-duration: 350ms;
-webkit-animation-timing-function: ease-in-out;
}
This is the CSS for the content DIV which is where everything is being modified at:
#content {
width: 100%;
position: absolute;
z-index: 1;
overflow: auto;
-webkit-overflow-scrolling: touch;
}
Lastly this is the trigger that ends up breaking everything basically:
document.getElementById('content').innerHTML = "<div id=\"fav\" class=\"favup\"></div>";
I also update the height after every DOM update to keep the scrolling working properly as talked about here: iOS div momentum scrolling without fixed height (content loaded via ajax)?