I am facing issues where when a user clicks on a link it redirects them to a specific div with a specific id.
I'm using jQuery for the smooth scroll feature.
The issue is when I'm at the Homepage then I click on the About page it normally scrolls there, when I click back on the About link again the page moves a bit click again and it returns to normal.
You can try it out here (https://saa-d.github.io) And all of the code is here (https://github.com/saa-d/saa-d.github.io)
Thanks in advance :)
EDIT: I've tried troubleshooting using Chrome's inspection tool, and I think the problem is with the .stick CSS class that's responsible for sticking the navbar using JS. But I am not exactly sure what's the issue and how to fix it.
It's happening because you attach and detach the nav which causes the section to shift up and down by the height of the nav.
To avoid it use position:absolute on the nav:
nav {
background-color: #595241;
height: 60px;
position: absolute;
width: 100%;
}
Related
I made a portfolio website with HTML, CSS (and Bootstrap), and JavaScript. My issue is the sticky navigation bar.
The .sticky-top class from Bootstrap does not work. The reason it does not work is because I have a CSS line that sets overflow-x as hidden for the body. For some reason my website had a cut off in the middle and whitespace on the right side when in a mobile format, so when I looked for a solution I read to use the overflow-x: hidden property to fix it (shown below).
html,
body {
overflow-x: hidden;
}
Which it did fix that issue, but I was also able to isolate that this is why the navbar is not sticky. Obviously I cannot have my website cut in the middle so I thought maybe I could try another way to get a sticky navbar.
Since I can't use Bootstraps sticky nav, I tried to use position: sticky in CSS and that did not work either.
#navBar {
position: sticky;
}
Then I pulled and altered multiple versions of sticky navbar code for vanilla JavaScript (including testing with console.log to see if they were active), and they ran but did not keep the navbar sticky.
I am not sure how to get both the overflow-x: hidden to stay and get a sticky navbar. Maybe if I could figure out how to fix the website getting cut off on mobile (therefore remove the overflow-x issue), then I would be able to keep the Bootstrap sticky-top. Does anyone have any ideas for why either are giving me trouble?
Website link: https://1amporkchop.github.io/PortfolioWebsite/
GitHub repo with all the code: https://github.com/1amporkchop/PortfolioWebsite/tree/gh-pages/docs
you can always use position: fixed; make sure to also use width: 100%; with it
I have a site with a menu bar. This is its CSS:
navigation {
position: relative;
z-index: 200;
}
In one of the pages, I have a button which triggers an iframe and that button is wrapped with div. The iframe is external and my div is coming over that iframe. I want it to be go behind, but can't seem to find a way.
I also want to make sure that any change will not impact other browsers and screen layouts (like mobile).
Change the z-index of the button to be less than that of the iFrame
Mess around with z-index on here:
https://www.w3schools.com/cssref/tryit.asp?filename=trycss_zindex
I am developing hamburger sidebar menu for my website. This my current work.
Jsfiddle
I just want to stop scrolling when hamburger menu expanded. So I've added overflow: hidden to body when menu is expanded. (click toggle for body element $('body').toggleClass('scroll-lock'); )
The problem
I have tested this in ios both chrome and safari browsers. Seems like overflow: hidden not working fine. I have googled and found out that I need to add position:fixed also. Used that and working fine. But when I scroll down a bit and click my hamburger menu, it will work but jumps to top!
I have googled and tried so many times but didn't work any pure css methods.
.scroll-lock{
overflow: hidden;
position: fixed;
}
I have a bit js,jquery knowledge.
But I have an idea. How about using jquery .scrollTop() function to archive this? Found this resource Jsfiddle
Any help?
maybe this solution help you:
1- change position from fixed to absolute (scroll-lock)
2- change parent position to relative
3- (optional) top:10px;left:10px;(more or less than 10) (scroll-lock)
I'm creating a web based mobile application and looking for a way to slide between pages.
Currently I have all the pages (which are divs) set to absolute and have them placed exactly on top of each other. Only one page is visible at a time, when the user clicks a button it hides the current page and sets the button targeted page's visibility to true.
I need the page to slide though, like iOS and other mobile platforms do. Using jQuery Mobile is not an option for me (I'm creating a framework myself).
If anyone can advise me on how I can have the pages slide in rather than cut and show immediately I'd appreciate that.
Thanks
You can use css transitions to animate the div's position, e.g.
.page {
position: absolute;
transition: left 1s;
left: 100%;
}
.page.in {
left: 0
}
See also: http://jsfiddle.net/jkDUm/
It probably doesn't show the exact effect you are looking for but it demonstrates the idea...
On many sites now, say you have a toolbar/table-header that is midway in the page.
Once you start scrolling, you can't see the header or toolbar anymore so you can't perform actions on any rows you may have selected, or you can't see the name's of the headers of the columns.
Many sites do this now, which is great, when you start to scroll the toolbar/header is fixed at the top of the browser. This doesn't happend right away, only when you scroll down to the point where the header/toolbar would normally not be visible.
How can I do this? Is there a name for this functionality?
Gmail has this, if you scroll down when reading an email, the toolbar at the top is fixed at the top so you can label/move/spam the email.
Take a look at jQuery Waypoints - Sticky elements, should be what you're looking for.
Use this css:
.static{
position:fixed;
}
And then, put a class="static" to your header element.
Hope this helps. Cheers
You don't need Javascript to solve this problem — don't make it harder on yourself. Using fixed positioning forces the header to "hover" above your content, and when you scroll, remain at the top of your screen, not at the top of the page. You can use this CSS to make your header fixed.
.header {
position: fixed;
}
Make sure you assign the class "header" to your div. For design reasons, I'd suggest keeping your header at the very top of the screen and stretching all the way across. You can use this CSS to do so.
.header {
top: 0px;
left: 0px;
width: 100%;
}
Technically, you don't need to specify "top" or "left" positioning, but it ensures you don't have anything to go wrong if you do decide to change something like that later. You can take a look at other types of positioning at this site.