I have a problem with Google Search application for iOS. When opens a page through Google search app the bottom sticky bar disappears on scroll down and if I scroll up the sticky bar appears. The bottom sticky bar hides under the google search app bottom bar. I tried to change my sticky bar height, but with no luck - the bar always disappears under google search app bottom bar. Any ideas how to fix this problem ?
This is how I fixed this problem:
<script type="text/javascript">
$(function(){
//Check for Google Search App
var strAppVersion = window.navigator.appVersion;
var GSAPosition = strAppVersion.search('GSA');
if (GSAPosition > 0) {
var lastScroll = 0;
$(window).scroll(function(event){
//Sets the current scroll position
var topOffcet = $(this).scrollTop();
//Determines up-or-down scrolling
if (topOffcet > lastScroll){
//if scroll-up change .desktop-price-block bottom property
$('body #body-container-sc #container #product-page .desktop-price-block').css({'bottom': '0'});
}
else {
//if scroll-down change .desktop-price-block bottom property
$('body #body-container-sc #container #product-page .desktop-price-block').css({'bottom': '130px'});
}
//Updates scroll position
lastScroll = topOffcet;
});
}
});
Related
I have a site design where a second logo needs to appear after a set scroll position. I have managed this with the following code:
myID = document.getElementById("logoTwo");
var myScrollFunc = function () {
var y = window.scrollY;
if (y >= 300) {
logoTwo.className = "logo-lines show"
} else {
logoTwo.className = "logo-lines hide"
}
};
window.addEventListener("scroll", myScrollFunc);
Can I adapt this script so that when a user scrolls to a set point of the screen, the logo then stops being fixed position, and will scroll with screen with the rest of the content?
Thank you
look into using css position:sticky for the logo that needs to move out of the way after a set point, the logo element's position would be sticky, and the bottom of its parent container is where it would stop being fixed on screen. Position the bottom of the sticky element's parent at the point where you'd like the fixed position to stop, and the sticky element will scroll with the page.
For reference: https://alligator.io/css/position-sticky/
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.
Is it possible to make DIV bigger when content of the page is scrolled? I have chatbox with position:fixed on the right side of my page. My CSS for the chat box is height:100% right:0 bottom:0 top:50px. The top:50px is because I don't want it to hide the navigation bar on top of my page. Now the problem is, that when I start scrolling the page, the navigation bar obviously disappear from sight and there is 50px high blank space on top of my chatbox. What I want is that when I start scrolling the page, the chatbox should take the whole 100% of the screen, so that there is no blank space on top of it.
you may do this:
$(document).ready(function () {
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
$('.chat_box').css({top:'0px'});
}
else {
$('.chat_box').css({top:'10px'});
}
});
});
http://jsfiddle.net/5tnygmrz/1/
demo - http://jsfiddle.net/victor_007/cq1e8c1t/
i think you will need javascript
window.onscroll = function (e) {
var topscroll = window.scrollY
if (topscroll > 50) {
document.getElementById('fixed').style.top = 0
} else {
document.getElementById('fixed').style.top = 50 + 'px'
}
}
http://nggalaxy.ru/en/about-us/ - here is the example of exact behaviour to be implemented. When you scroll down the page, the side menu disappears and appears on top of the page.
How it can be realized using bootstrap for example?
Thank you.
Here is an example of raw Javascript + jQuery making this happen:
<script type="text/javascript">
$(window).scroll(function(){
var a = 112;
var pos = $(window).scrollTop();
if(pos > a) {
$("menu").css({
position: 'fixed'
});
}
else {
$("menu").css({
position: 'absolute',
top:'600px'
});
}
});
</script>
This will add a CSS style if the user scrolled 112 pixel down. Like this you can create all styles for your menu.
In General: Use javascript to check on what scroll-position the user is, and append the styles or classes.
I want to put the div behind the scrolling header like it is for the footer.
The footer is
#rt-footer-surround {
color: #686868;
background-color: #2E244E;
height: 40px;
width: 100%;
z-index: 900;
bottom: 0;
left: 0;
padding: 10px;
position: fixed;
}
but I cannot replicate it for the header.
the site in question is here:
site with z-index issue
To use the z-index style, you must also use either position:fixed;, position:absolute;, ,or position:relative; on the same object you wish to style.
Then, you can simply use a div to represent your header, footer, and main content section as follows:
<div class="head"></div>
<div class="mainbody"></div>
<div class="foot"></div>
Or alternatively, you can use the <head>,<main> and <footer> tags instead of divs. As far as coding and visuals are concerned, there is no difference.
Also, you don't have to put a massive number on the z-index. As long as one element's z-index is greater than another one's, that element will always be layered above, whether it is 900 over 1, or 2 over 1.
Ok here is what I came up with to solve the problem. Jquery.
Essentially my question was asking for this in the first place.
If you have content in a div you can place a nav bar in that div as a position:relative i.e. relative to that div.
What you cannot do via css is have the content in that div scroll up and stay underneath the nav bar you created. Furthermore when the nav menu area scrolls beyond the top of the screen it will then disappear.
So the jquery code I used does two things. It allows you to take a nav menu bar i.e. width 600px / height 50px and place it in its relative position anywhere you like. Furthermore, when it reachs the top of a users screen it will stop/halt and allow that to be the menu that is visible while everything else scrolls underneath that menu area.
Now, I don't think this is anything really new from Jquery but what is ultra convenient is that you can define a menu nav bar in any div position you want. Have a regular menu at the top and another menu perhaps below a slider or some content further down the page.
I will share the code if that is ok with SO... I paid for it myself.
Oh and here are two websites I have employed it on.
http://isaerudition.com/study-pages &
This is for a client I am preparing his website...
// JavaScript Document
/* jQuery(document).ready(function(){
if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
var el = jQuery('.isa-scroll-fixed'),
elTop = jQuery(el).offset().top;
elLeft = jQuery(el).offset().left;
//alert(elTop);
jQuery(document).scroll(function(){
var height = jQuery(window).height();
var scrollTop = jQuery(window).scrollTop();
if(scrollTop>=elTop){
//add fixed
jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
}else{
//clear fixed
jQuery(el).removeClass('scroll_fixed').attr('style','');
}
})
}
})
*/
// JavaScript Document
/* jQuery(window).load(function(){
if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
var el = jQuery('.isa-scroll-fixed'),
elTop = jQuery(el).offset().top;
elLeft = jQuery(el).offset().left;
//alert(elTop);
var scrollTop = jQuery(window).scrollTop();
scrollFixed(el,elTop,elLeft);
}
}) */
var setInter = null;
var session = null;
setInter = setInterval(function(){
if(jQuery('header,div,p,span,h1,h2,h3,h4,a').hasClass('isa-scroll-fixed')){
var el = jQuery('.isa-scroll-fixed');
session = jQuery(el).attr('set-scroll');
//alert(session);
if(session == '2'){
jQuery(el).attr('set-scroll','2');
}else{
jQuery(el).attr('set-scroll','1');
}
if(session == '1'){
setValue(el);
}
}
}, 200);
function setValue(el){
var setScroll = jQuery(el).attr('set-scroll');
elTop = jQuery(el).offset().top;
elLeft = jQuery(el).offset().left;
//alert(elTop);
jQuery(el).attr('set-scroll','2');
scrollFixed(el,elTop,elLeft);
};
function scrollFixed(el,elTop,elLeft){
jQuery(document).unbind('scroll').scroll(function(){
//alert(elTop);
var height = jQuery(window).height();
var scrollTop = jQuery(window).scrollTop();
if(scrollTop>=elTop){
//add fixed
jQuery(el).addClass('scroll_fixed').css("left",elLeft+"px");
}else{
//clear fixed
jQuery(el).removeClass('scroll_fixed').attr('style','');
}
})
}