I just made some scrolling sticky menu on my school project website, and i found this little problem. It's about transition hover effect of my menu links. You can see default menu is absolute positioned and at this stage transition is working perfectly, but when you scroll page down it header becomes fixed and transition effects stops working
here's my page: http://79.170.44.87/tatras.eu/
//edit: it's just problem of google chrome
//edit2: + its somehow cause of video background but i dont know why
Related
I created a bootstrap navbar for my Wordpress site and am having an issue. The navbar works, but when the user closes the expanded navbar, the li items linger and lag for awhile before disappearing. I would like them to disappear with the rest of the navbar background but can't figure out what is causing the delay and how to edit it. Is this a built in bootstrap feature? This issue only happens when the user is at the top of the page (when the user scrolls, the background changes to a white background color, which makes the lag less noticeable (although still present).
Here is the draft site: http://xbm.naa.mybluehost.me/
Thank you!!
The answer was:
.collapsing{
transition: none;
}
The transition effect wasn't being applied to the navbar links, just the background color.
I have a site that I'm doing some tweaks on and everything is done except for some logo/header issues.
I have a sticky header with animation which causes it to create a smaller size sticky header with a new logo, but the sticky header animation is a bit jerky and if you scroll back up quickly the logo jumps out of the bottom of the header for a second. It looks really strange for the user.
The site is at www.Dev.smithermancpa.com and you can scroll the page and see it in action.
I changed the animationDuration in the avada-header.js file which helped a bit (going from 300 ms to 100 ms) but is there a more distinct fix for this issue? I've seen a lot of smooth sticky header animations before so I'm sure there is a known good way to do this that I'm unaware of.
I am struggling with the same problem. Avada 5.2.1 at the moment.
What I've seen in all browsers is a two step animation. Big logo to small logo and no animation steps in between.
I think I found a way to immediately get a smoother animation. I set a background for the logo but make the background transparent. There is a theme setting for logo background. Make it black and drag opacity to the bottom.
I have a demo of a custom sticky nav.
Demo: http://evanzio.github.io/custom-sticky-header-nav/
Repo: https://github.com/evanzio/custom-sticky-header-nav
Functional Spec:
Header should stick to bottom of client window when landing on page.
When scrolling down, the header should remain fixed.
Once first image has become fully visible, header should stop sticking to the bottom and continue moving with the scroll.
Once the header hits the top of client viewport it will then stick to the top.
This all works fine, until a window resize. Once the page is resized from large to small, the waypoints seem to mess up and the header sticks and unsticks at random points.
Steps to replicate issue.
Load page in large
scroll to bottom of the page
resize browser width to small
start scrolling back up and you will see it jump around and leave a white space where the header should be.
I believe on resize the waypoints should refresh automatically, so not sure why this is breaking? Anyone have any ideas?
Or any other ways to achieve the functional spec?
Thanks!
So after some playing around, I realised it was because I had a fixed position on a waypoint element. Which is a NO NO!
I have a website that includes an image gallery that turns into a slideshow on click. The website is divided into 4 vertical sections and you navigate through it (jumping up/down from one section to the next) with a smooth scroll effect by clicking on the main navigation menu.
Everything works perfect with Firefox, but when I open it with Chrome 2 major problems:
1. The page keeps bouncing up and down like a yo-yo whenever you're in the "projects" section. Click on "Projects" in the main nav menu and you will see what I mean.
2. The slideshow doesn't work properly. Click on "Artwork". Then click on any image. You'll see that if you do this in Firefox the navigation menu is hidden behind the slides. However, with Chrome they are in the front. I have set the Z-index of the slides with #slideshow img {z-index: 1000} so I really have no idea why this is happening.
You will find my website here:
http://ninetieschild.github.io/my-site/
Thanks so much.
Issue:
$window.bind("scroll resize", function() {`
is wrong. It keeps auto executing continuously.
As this statement is always true
if(scrollTop > $('#services').offset().top-$(window).height()+300 && scrollTop < $('#about').offset().top-$(window).height()+$('#cogs').height()){
transform functionality after changes window size/scroll so the function gets executed again.
What are you trying to accomplish?
You just want to click on me menu and get scroll to that specific sections?
I am doing a website using a free slider from here. I want to use the slider with a nav bar at the top of the page. My problem is, whenever I add the navbar in to the page the slider begins to scroll up and down. If I remove my nav bar everything works fine. When the slider scrolls, only the arrow buttons and the page tabs at the bottom scroll but not the image. My website is MQMGaming.com. Is there anyway to keep the slider from scrolling so it is the same as without the nav bar?
Thanks in advance.
It's not the navigation itself causing the issue, it's the two br tags you have after the nav ends. If you remove them it works fine.