I am trying to make a single page design with a navigation bar fixed at top using bootstrap but whenever I scroll the page and get back to top I see that there is a copy of navigation bar in the middle of the page.I tried reversing the contents position(section1->section3->section2) instead of
(section1->section2->section3). But the problem still exist .
This problem is only in chrome I have tested on firefox and internet explorer and everything is fine but in edge browser the navbar becomes invisible. and after some time it comes back. dont know how.
I dont know which code is causing the problem (css ,js,jquery) so I am not pasting anything here I will paste the code as per all you direction.
Related
I'm currently stumbling on a bit of a problem involving (smooth)scrolling and trying to "update" a navigation bar at the same time.
Currently I have a large webpage that has a lot of content under different headers. These headers are displayed in a navigation bar that spans the whole view width of the page, each of these elements are href's to smoothly scroll to the current position of the header.
The header the user is currently is viewing gets highlighted within the navigation bar. However I would also like to scroll this header to the front or middle of the navigation bar for easily navigating the page.
Using the following code:
nav_bar.scrollBy(scrollAmount-125,0);
All of this works completely fine until I introduce: html {scroll-behavior: smooth;} to the CSS. As soon as I call the .scrollBy() the smooth scrolling get interupted and halted before it can complete the scrolling to the element referenced by the href.
Is there any solution to fixing this problem, I tried to get the .scrollBy() to run after the scrolling is complete but have not been able to get this to fully function. The problem is with the html {scroll-behavior: smooth;} since removing this property gives the desired results for functionality but without my desired User Experience.
Hi everyone,
I'm working on a side navigation menu for my churches website. You can see the demo here:
http://amightywind.com/sideNav/
However I have a problem. The navigation is supposed to work so when you scroll down the page past it's bottom the css changes to make it anchor and stop moving.
The problem is that the "anchoring" effect doesn't always work smoothly and will only be applied after you scrolled a few pixels past the bottom.
This causes the side bar to "jump" back into it's designed place.
I know this problem is probably caused by asynchronous panning (the browser delays repainting when scrolling to keep a smooth frame rate).
I was going to call this unsolvable, but then I saw firefox's quantum browser page.
If you scroll down halfway, you will see a large pink box on the left that says "Firefox Quantum features".
The text changes positioning when you scroll into it similarly to how my side bar works. However 2 things are different.
1 there is no jump. It is perfectly smooth in every browser I tested.
I figured this could easily be because they are moving a smaller portion of content than I am, but....
2 when I inspect element I notice there is no css class/style change on the object when scrolled into it.
How is this possible? Is there a way to make this effect work without Javascript? Or at least more smoothly than I've done just listening to the window scroll event?
Any help would be much appreciated thank you!
I'm currently working on my new website which happens to be my first go on frontend development. I realized links on the vertical navigation stops working after scrolling to some point of the page. I have tried all I can and have search the web, still not working. Here's the link to the website - http://preciousm.co/
It looks like the featured work sections are overlapping your header. Simply turn up the z-index on the header element and it will work again.
So I have a website that has a hamburger menu on mobile.
The problem is that whenever the page loads on a small device, the hamburger menu is way outside the view port to the right. This causes side scrolling issues and tons of white space.
I originally assumed I had written some css that was causing this, but after experimenting, I've come to realize that I do not know what is going on at all.
I have Gifs of the problem. I will also provide a URL if needed.
Heres the first gif
https://gfycat.com/GiftedPlaintiveEgret
So heres what is happening. I am inspecting the DOM of the webpage. If you pick any random element on the page, and edit a CSS attribute, then the menu fixes itself. It doesn't matter what element you select or what css attribute you edit; when you make an adjustment the problem is fixed.
Here is the second gif
https://gfycat.com/EasyIllustriousBlackbear
In this gif, the issue is literally fixed just by activating a CSS plugin called pesticide. Pesticide simply adds another external css sheet to the document that outlines everything in blue. Notice that even when I turn off pesiticde, my issue has been fixed.
And finally the third gif
https://gfycat.com/ContentRepentantBeetle
This is the most perplexing issue. It fixes the hamburger icon simply by resizing my browser screen. Obviously mobile users cant do this.
I truly don't understand this issue. I've tried to set a width of 100% on the nav element. I've written some javascript that when the DOM is ready, to add a css attribute to a a DIV in the footer and then remove it after a few seconds. This does not fix my issue. I would happily provide the javascript I wrote if requested.
Has anyone else ever had an issue like this?
EDIT
Here is another example. I use the browser Blisk to test my sites on multiple devices. Look at this
https://gfycat.com/BouncyFlakyGlobefish
When I first load up the site, I have my hamburger menu issue. When I tell the browser to view the site from a different device 'say switching from iphone 5 to iphone 6' it fixes the issue. I am so frustrated with this problem.
The white section's animation is increasing the width of the page (pushing the hamburger which is fixed to the right out of view), I'm not certain why this doesn't update properly after the animation is complete, but it would appear it requires a page re-flow before working correctly.
A possible CSS fix would be to add .bodymargins{overflow:hidden} though this may cause problems to other styling (untested on your site)
If this isn't an option, you could manually trigger a re-flow of the page shortly after loading (this is a slightly nasty option, but is better than it being broken)
Various re-flow options available here
It may be because you are using media queries and your browser width is not yet small enough for them to fire when you test.
If not, make the media queries and don't use the margin-left:auto for the smaller screen size?
I have horizontal parallax div that displays a very wide image (3000px) and as you move the pointer left or right the image slides in the opposite direction. It works great except in Chrome.
When the page is loaded into Chrome for the first time the image follows the pointer instead of going in the opposite direction. If I reload (F5) it is still the same problem, HOWEVER, if I reload from the address bar with the URL it works perfectly. I have tried everything that I can think of.