I'm working on a single page website with a fixed header at the top that has a navigation menu. The navigation menu links to divs on the page.
The issue is that when you click on one of the links the header covers up the section title. I'm wondering how this can be fixed without adding a ton of padding at the top of each div.
Here's the page:
http://arifolmancohen.com/Ari/index.html
I see you are using jQuery, so perhaps this snippet I found just the other day is exactly what you are looking for.
This issue you have is a href=#target's automatically find the element with the matching ID#target (then name=#target, ...) and bring that to the top of the page. However, in your case, because you have a fixed header, the header will cover the top of whatever is brought to the top of the page!
SO, by subtracting the height of your fixed element (95px) from where the page would normally be scrolled to, you prevent your fixed header from covering your content.
Include the following JavaScript between your </body> and </html> tags at the end of your HTML page:
(function($) {
$('.main-nav a[href^="#"]:not([href=#])').click(function() {
if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate({
scrollTop: target.offset().top - 95
}, 1200);
return false;
}
}
});
})(jQuery);
I think scrolling with offset is only possible with JavaScript. With it you can scroll to the appropriate heading element when a navigation link is clicked. Check out this answer and try adding (or subtracting?) to the offset.
$('html, body').animate({
scrollTop: $el.offset().top
}, 1000);
This is for a smooth scroll, you can use 0 ms for an instant scroll.
Related
I am using a fixed navbar with bootstrap 4. When using fixed-top navbar, content below it is hidden by the navbar because its position is fixed. I had to give padding-top: 65px; on the body, to make the content appear below the navbar.
I have internal links so clicking on a navbar anchor positions the page on the section relative to it. However, because I used the padding-top trick, the position is 65px below the top of the section. Is there a way to solve it so that position returns to the top of the section?
You should not add from the first " fixed-nav" class. you can add this in scroll event of jquery.
$(window).on('scroll', function () {
var scrollTop = 20;
if ($(window).scrollTop() >= scrollTop) {
$('nav').addClass("fixed-nav");
}
if ($(window).scrollTop() < scrollTop) {
$('nav').removeClass('fixed-nav');
}
});
this add fixed-nav in user scroll down in your site.
On click of a link, I set the padding top of the body to 0, and on hash change event after the page positions on the section relative to the inline link, I set back the padding to 65.
$('.nav-link').click(function () {
$('body').css('padding-top', '0');
});
window.onhashchange = function () {
$('body').css('padding-top', '65px');
};
$(document).ready(function() {
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':+top_pad+'px'});
$(window).resize(function(){
var top_pad = $('.your_headerelem').height();
$('.first-emem-after-header').css({'padding-top':top_pad+'px'});
}) ;
}) ;
This will make your first element after header, lie below header.
I have successfully designed page anchors which will on first click compensate for the fixed header height, code below:
<p id="anchorid" style="padding-top: 287px; margin-top: -287px; width: 20px;">
FILLER TEXT
</p>
The issue I have is that my header shrinks when you scroll, so once you click onto a page via an anchor, the next time you click an anchor -for- that page while -on- that page, the padding over-compensates (as it is set to the initial header height) and the section is brought to the middle of the page rather than the top. What I hope to do is have the anchor padding set dynamically to the height of the header, so that it always brings the section to the top, but I am woefully lost as to how to do this.
Is there a way to use the anchor (the id="filler") to have the browser scroll to a certain point, depending on the height of the header, using CSS?
Similar problem solved here, but their header doesn't change size: HTML position:fixed page header and in-page anchors
EDITED ANSWER :
Here is the code I'm using for a fixed header who takes care of the offset when scrolling to anchor with a smouth scroll using jQuery.
Here is an illustration : https://jsfiddle.net/mmb5k7xb/1/
To see how the script react with a different height, just change the value of the menu height in the html part.
Hope it helps.
<script type="text/javascript">
var $ = jQuery.noConflict();
$(document).ready(function($) {
var menu_height = $('.menu').height(); // calulate the height of the menu
(function(document, history, location) {
var HISTORY_SUPPORT = !!(history && history.pushState);
var anchorScrolls = {
ANCHOR_REGEX: /^#[^ ]+$/,
OFFSET_HEIGHT_PX: menu_height, // Set the offset with the dynamic value
/**
* Establish events, and fix initial scroll position if a hash is provided.
*/
init: function() {
this.scrollIfAnchor(location.hash);
$('body').on('click', 'a', $.proxy(this, 'delegateAnchors'));
},
/**
* Return the offset amount to deduct from the normal scroll position.
* Modify as appropriate to allow for dynamic calculations
*/
getFixedOffset: function() {
return this.OFFSET_HEIGHT_PX;
},
/**
* If the provided href is an anchor which resolves to an element on the
* page, scroll to it.
* #param {String} href
* #return {Boolean} - Was the href an anchor.
*/
scrollIfAnchor: function(href, pushToHistory) {
var match, anchorOffset;
if(!this.ANCHOR_REGEX.test(href)) {
return false;
}
match = document.getElementById(href.slice(1));
if(match) {
anchorOffset = $(match).offset().top - this.getFixedOffset();
$('html, body').animate({ scrollTop: anchorOffset});
// Add the state to history as-per normal anchor links
if(HISTORY_SUPPORT && pushToHistory) {
history.pushState({}, document.title, location.pathname + href);
}
}
return !!match;
},
/**
* If the click event's target was an anchor, fix the scroll position.
*/
delegateAnchors: function(e) {
var elem = e.target;
if(this.scrollIfAnchor(elem.getAttribute('href'), true)) {
e.preventDefault();
}
}
};
$(document).ready($.proxy(anchorScrolls, 'init'));
})(window.document, window.history, window.location);
});
</script>
I have a very similar question to this user, but wasn't able to solve my problem.
I also referred to Chris Coyier's tutorial and used his :before pseudo-element approach. However I cannot get the top of the <section> element to reflect the same top as it's :before child.
Here is some sample code:
HTML
<section id="about">
CSS
#about:before {
display: block;
content: " ";
margin-top: -180px;
height: 180px;
visibility: hidden;
}
Here is the website I am working on so you can check it out live.
The reason I am wanting to do this is because my nav bar is fixed and whenever clicking on hash tag links from the nave bar it nearly cuts off the section title. I would just like to offset the stopping point of the scroll to add just a bit more padding between the title and nav bar.
Thanks in advance!!
It would seem that the padding-top on your section element is what is causing the problem. If you remove the padding it will work, however, all your spacing would need to be fixed.
I think the easiest thing for you to do would be to offset your scroll function... In agency.js add - 70 after scrollTop: $($anchor.attr('href')).offset().top on line 12:
// jQuery for page scrolling feature - requires jQuery Easing plugin
$(function() {
$('a.page-scroll').bind('click', function(event) {
var $anchor = $(this);
$('html, body').stop().animate({
scrollTop: $($anchor.attr('href')).offset().top -70
}, 1500, 'easeInOutExpo');
event.preventDefault();
});
});
I have a webpage with a set of menubuttons, my question what's the easiest way
to scroll down my page by clicking a button, for example button middle will scroll
to the middle of the webpage, button bottom scrolls down to the bottom simply by using html/css.
In my case I have a button called gallery if I click on it I want my page to move
to the image gallery section on the same page.
<a href='#random'>Go</a>
<div id='random'>Hello</div>
Now when you click on the 'a' tag it will drop down to the div of id='random'
You could also use the following jQuery snippet to animate the scroll action:
$('a[href^="#"]').on('click',function (e) {
e.preventDefault();
var target = this.hash,
$target = $(target);
$('html, body').stop().animate({
'scrollTop': $target.offset().top
}, 900, 'swing', function () {
window.location.hash = target;
});
});
});
It takes ID as selector.
Is there a way to scroll the content of an element that has an overflow of hidden to the top?
Example use case:
Container element has a max height of 200px, starting position is at 60px.
User clicks "show more", the height expands to 200px.
Since there is more content than 200px allows, the user can scroll to the bottom of the list.
When the user clicks "show less", the height lowers to 60px.
Problem arises, in that the list is no longer at the top and not scrollable.
Any ideas here would be great.
I believe it is not possible with CSS.
You can try to look at element.scrollIntoView.
Searching for scrollIntoView I found this question on SO where the answer suggests using jQuery's scrollTop.
Do you mean something like that?
http://jsfiddle.net/8pvjf/
It has to do with jquery indeed
$(document).ready(function(){
$('.background').css('font-size',($(window).width()*0.1));
$(".blow").each(function(){
});
$('.blow').on('click', function(event){
var element = $(this);
if(element.attr('data-blow') == 'true'){
element.animate({ width:'24%', height:'20%' , opacity:0.6 }, 1000).attr('data-blow', 'false')
$(this).addClass('blow')
$(this).removeClass('overflow')
} else {
element.animate({ width:'100%', height:'100%' , opacity:0.95 }, 1000, function(){
$('body').animate({ scrollTop: element.offset().top });
}).attr('data-blow', 'true').addClass('overflow').removeClass('blow');
}
});
$(window).resize(function(){
$('.background').css('font-size',($(window).width()*0.1));
});
Have fun toying with those codes as much as you want.
Of course, this is based on some previous work of mine and you'll need to change your classes and styles accordingly to your needs. :)