Image is not visible. However if I undo position:fixed
.sample-header {
position: fixed;
left: 0;
top: 0;
Then image becomes visible, but at the same time the parallax effect is also lost. what is the solution.
I am following this pen :
I am trying to replicate this behavior : Click Here
Hi there, Do I need to provide any additional information?
Welcome, @Novice. I understand if you are feeling a bit anxious about getting your parallax issue resolved, but you won’t always get a response right away. The members are very helpful and friendly, but answer voluntarily and you might just have posted at a time when the ones who are knowledgeable in this area are busy. Try to be patient, and I’m sure you will get some answers before too long. Unfortunately, I’m not one of those people - I’ve never worked with parallax, or I would give this a shot.
Thanks. I will wait for them.
Did you copy and paste the jQuery link into the head of the page?
<script src="https://code.jquery.com/jquery-latest.min.js"></script>
That code is in word press theme. WordPress automatically loads J QUERY. It seems to be some CSS issue.
I may be wrong though.
Are you supposed to see the same mountain image on your site as we see in the codePens? If not, where is the link to the image? I don’t see it, either.
.sample-header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-image: url(http://webmadewell.com/wp-content/uploads/2018/01/img-bg-sample-parallax-header.jpg);
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
sir if you remove position:fixed- image will be visible.
No It’s a js issue.
Wrap your snippet up like this and add it to the bottom of the page before the closing body tag.
<script>
(function($) {
function parallax_height() {
var scroll_top = $(this).scrollTop();
var sample_section_top = $(".sample-section").offset().top;
var header_height = $(".sample-header-section").outerHeight();
$(".sample-section").css({
"margin-top": header_height
});
$(".sample-header").css({
height: header_height - scroll_top
});
}
parallax_height();
$(window).scroll(function() {
parallax_height();
});
$(window).resize(function() {
parallax_height();
});
})(jQuery);
</script>
It also looks like the header image is missing
Thank you so much. It looks like that the image was missing because it was coming from some CDN that doesnt allowed it on another website. I changed the image and it seems to be working. Thank you so much again.
Hi there @PaulOB,
I do not need text →
<div class="sample-header-section">
<h1>Scroll down to see the parallax effect</h1>
<h2>Background landcape scrolls with its own depth </h2>
</div>
What is the solution for this?
If I remove this the size of the image portion decreases. should I fix some minimum height on some part of CSS I hope that will not distort the parallax effect.
I am trying to replicate some what this effect.
I believe that something needs to be fixed here →
.sample-header {
position: fixed;
left: 0;
top: 0;
width: 100%;
background-image: url("https://format-com-cld-res.cloudinary.com/image/private/s--CfvIN071--/c_lim…rogressive,q_95/v1/1761edf…/COVER-HENDE-UPDATE.jpg");
background-position: center;
background-size: cover;
background-repeat: no-repeat;
}
Text added:
Mostly things are working now, but want to increase the height of the available image.
Text added 2
I think JavaScript is throwing the height.
<div class="sample-header" style="height: 425px;">
Try setting a min-height here.
.sample-header-section{min-height:500px;}
I am facing one more issue. Could not fix that.
In the footer Here:
There will a link Contact Pop up
But the modal box doesn’t open. However when I open the link directly the Modal Pop up box opens:
Direct link (Opening in a new window)
What could be the reason behind such behavior.
This is the code
<div id="target-content">
<a href="#" class="close"></a>
<div id="target-inner">
<!-- <h2>Modal Heading</h2> -->
<?php echo do_shortcode('[contact-form-7 id="331" title="Contact form 1"]'); ?>
</div>
</div>
<style media="screen">
#button {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
padding: 16px 24px;
border-radius: 1px;
text-decoration: none;
font-size: 24px;
display: block;
color: white;
background-color: #34495E;
text-align: center;
font-weight: 100;
-webkit-transition: box-shadow 200ms;
transition: box-shadow 200ms;
border-radius: 4px;
}
#button:hover { box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); }
#target-content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content:target {
pointer-events: all;
opacity: 1;
}
#target-content #target-inner {
position: absolute;
display: block;
padding: 48px;
line-height: 1.8;
max-width: 700px;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
#target-content #target-inner h2 { margin-top: 0; }
#target-content #target-inner code { font-weight: bold; }
#target-content a.close {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #34495E;
opacity: 0.5;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content a.close:hover { opacity: 0.4; }
</style>
I also tried adding this script:
<script>
// When the user clicks on <div>, open the popup
function myFunction() {
var popup = document.getElementById("target-content");
popup.classList.toggle("show");
}
</script>
Still could not figure out the issue.
Probably some other script might be conflicting.
You have a script running that scrolls to the destination of #anchors and that is taking away the target.
In core.js:
function USScroll(options) {
var defaults = {
attachOnInit: '.menu-item a[href*="#"], .menu-item[href*="#"], a.w-btn[href*="#"], .w-iconbox a[href*="#"], .w-image a[href*="#"], .w-img a[href*="#"], .w-text a[href*="#"], ' + '.vc_icon_element a[href*="#"], .vc_custom_heading a[href*="#"], a.w-grid-item-anchor[href*="#"], .w-toplink, ' + '.w-blogpost-meta-comments a[href*="#"], .w-comments-title a[href*="#"], .w-comments-item-date, a.smooth-scroll[href*="#"]',
buttonActiveClass: 'active',
menuItemActiveClass: 'current-menu-item',
menuItemAncestorActiveClass: 'current-menu-ancestor',
animationDuration: $us.canvasOptions.scrollDuration,
animationEasing: 'easeInOutExpo'
};
It looks as though you can remove the class of menu-item from the anchor itself and it should work.
e.g.
Use this HTML instead of what you have:
<li id="menu-item-461" class="menu-item-type-custom menu-item-object-custom menu-item-461"><a href="#target-content">Contact Pop up</a></li>
(All i did was remove the class of ‘menu-item’ from the list element and now it works)
However the popup doesn’t show properly to me and the use of pointer events is risky as you risk blocking all your page content with the overlay because it is actually present at all times. I would change the code at the bottom of the page to this:
#button {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
padding: 16px 24px;
border-radius: 1px;
text-decoration: none;
font-size: 24px;
display: block;
color: white;
background-color: #34495E;
text-align: center;
font-weight: 100;
-webkit-transition: box-shadow 200ms;
transition: box-shadow 200ms;
border-radius: 4px;
}
#button:hover { box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2); }
/*
#target-content {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content:target {
pointer-events: all;
opacity: 1;
}
#target-content #target-inner {
position: absolute;
display: block;
padding: 48px;
line-height: 1.8;
max-width: 700px;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
*/
#target-content {
position: fixed;
top:0;
left:0;
opacity: 0;
z-index:-1;
height:0;
width:0;
overflow:hidden;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content:target {
opacity: 1;
top: 0;
right: 0;
bottom: 0;
left: 0;
height:auto;
width:auto;
overflow:visible;
z-index:999;
}
#target-content #target-inner {
position: absolute;
overflow:auto;
display: block;
padding: 48px;
line-height: 1.8;
max-width: 700px;
max-height:100vh;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
box-shadow: 0px 12px 24px rgba(0, 0, 0, 0.2);
background: white;
color: #34495E;
}
#target-content #target-inner h2 { margin-top: 0; }
#target-content #target-inner code { font-weight: bold; }
#target-content a.close {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #34495E;
opacity: 0.5;
-webkit-transition: opacity 200ms;
transition: opacity 200ms;
}
#target-content a.close:hover { opacity: 0.4; }
@media screen and (max-width:700px){
#target-content #target-inner {width:95%;}
}
That is a lot safer and won’t block content.
You also need to cater for mobile as the modal was not scrollable on mobile and didn’t fit and therefore inaccessible as fixed elements do not scroll and you could never complete the form. I added a media query to get you started and added scrollbars and a minimum of viewport height so that it never stretches out of the viewport. Fixed elements must always remain within the viewport because they cannot be scrolled to.
This took ages to sort out due to the layers of complexity in this design 
Hi there @PaulOB I think the website is built in Wordpress so she may not completely eliminate the classes(the class that you suggested to be eliminated). Forgive me if I have misunderstood you.
Yes I don’t do Wordpress so that would be something for the OP to work out if all classes are generated on the fly.
Thanks for replying. Can you please tell me exactly which class needs to be eliminated I can try to help @Novice
Addendum:
Sorry I got it → menu-item (class to be eliminated)
I was experimenting with the OP’s code.
I was trying if on scroll down image should start to fade - I tried this →
function myFunction() {
var myElement = $('.sample-header');
$(window).on('scroll', function () {
var st = $(this).scrollTop();
myElement.css({
'opacity': 1 - st / 600
});
});
}
It didn’t worked. where am i going wrong. I am supposed to add some animation also?
Adddendum:
I also tried this →
<script type="text/javascript">
$(function(){
var element = $('.sample-header');
$(window).scroll(function () {
if ($(this).scrollTop() > 100) {
element.fadeIn();
}
else {
element.fadeOut();
}
});
});
</script>