{"id":25881,"date":"2022-12-14T03:30:09","date_gmt":"2022-12-13T22:00:09","guid":{"rendered":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/"},"modified":"2022-12-14T03:30:09","modified_gmt":"2022-12-13T22:00:09","slug":"solved-why-isnt-my-image-doing-a-parallax-scroll","status":"publish","type":"post","link":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/","title":{"rendered":"[Solved] Why isn&#8217;t my image doing a parallax scroll?"},"content":{"rendered":"<p> [ad_1]<br \/>\n<\/p>\n<div id=\"answer-45634104\" class=\"answer js-answer accepted-answer js-accepted-answer\" data-answerid=\"45634104\" data-parentid=\"45633188\" data-score=\"0\" data-position-on-page=\"1\" data-highest-scored=\"1\" data-question-has-accepted-highest-score=\"1\" itemprop=\"acceptedAnswer\" itemscope itemtype=\"https:\/\/schema.org\/Answer\">\n<div class=\"post-layout\">\n<div class=\"votecell post-layout--left\"><\/div>\n<div class=\"answercell post-layout--right\">\n<div class=\"s-prose js-post-body\" itemprop=\"text\">\n<p>You do get your scrolltop in the console like that, on codepen, but likely not on local.<\/p>\n<p>Learn about <\/p>\n<pre><code>$(document).ready(function(){\n<\/code><\/pre>\n<p>Always load the jQuery src first, after the body element, then the rest of the JS code. Or inline it after the body closing tag. But always the jQuery first.<\/p>\n<p>Then , depending on the functionility, you might need the doc ready wrapper, here, you need it.<\/p>\n<p>Next, you need a reference element, if you only have one element on the page, there can be no parallax. I have added a h1 for demo purposes.<\/p>\n<p>Your full function:<\/p>\n<pre><code>$(document).ready(function(){   \/\/wait until the DOM is loaded\nvar wdw = $(window);   \/\/ cache the DOM object, always cache esp with jQuery\nvar header = $('.header-bg');\nvar hOne= $('h1');\nwdw.scroll(function() {   \/\/ scroll listener on window\nvar scrollTop = $(this).scrollTop();\nheader.css('top',-(scrollTop * 0.8) + 'px');\nhOne.css('top',+(scrollTop * 0.8) + 'px');\nif(hOne.scrollTop() &lt;= 10){\nhOne.css('opacity', '0.4');\n}\nelse {\nhOne.css('opacity', '1');\n}\nconsole.log(scrollTop);\n});\n\n});\n<\/code><\/pre>\n<p>Here is the link<\/p>\n<p><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/codepen.io\/damianocel\/pen\/zdzQYe\">https:\/\/codepen.io\/damianocel\/pen\/zdzQYe<\/a><\/p>\n<p>Note that this kind of stuff needs scroll throttling, there are 2 new APIs for this kind of things, this code is not perfect, but it runs and at least I have cached the variables.<\/p>\n<p>Now, I think this is very simple in plain JS, if you knew how to do this in plain JS, this question would not exist. Seriously, loading a jQuery for a parallax functionality is like punching babies,lol.<\/p>\n<\/p><\/div>\n<div class=\"mt24\"><\/div>\n<\/div>\n<p>            <span class=\"d-none\" itemprop=\"commentCount\"><\/span> <\/p><\/div>\n<\/div>\n<p>[ad_2]<\/p>\n<p>solved Why isn&#8217;t my image doing a parallax scroll? <\/p>\n","protected":false},"excerpt":{"rendered":"<p>[ad_1] You do get your scrolltop in the console like that, on codepen, but likely not on local. Learn about $(document).ready(function(){ Always load the jQuery src first, after the body element, then the rest of the JS code. Or inline it after the body closing tag. But always the jQuery first. Then , depending on &#8230; <a title=\"[Solved] Why isn&#8217;t my image doing a parallax scroll?\" class=\"read-more\" href=\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\" aria-label=\"More on [Solved] Why isn&#8217;t my image doing a parallax scroll?\">Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[320],"tags":[333,388],"class_list":["post-25881","post","type-post","status-publish","format-standard","hentry","category-solved","tag-javascript","tag-jquery"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>[Solved] Why isn&#039;t my image doing a parallax scroll? - JassWeb<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"[Solved] Why isn&#039;t my image doing a parallax scroll? - JassWeb\" \/>\n<meta property=\"og:description\" content=\"[ad_1] You do get your scrolltop in the console like that, on codepen, but likely not on local. Learn about $(document).ready(function(){ Always load the jQuery src first, after the body element, then the rest of the JS code. Or inline it after the body closing tag. But always the jQuery first. Then , depending on ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\" \/>\n<meta property=\"og:site_name\" content=\"JassWeb\" \/>\n<meta property=\"article:published_time\" content=\"2022-12-13T22:00:09+00:00\" \/>\n<meta name=\"author\" content=\"Kirat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kirat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\"},\"author\":{\"name\":\"Kirat\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\"},\"headline\":\"[Solved] Why isn&#8217;t my image doing a parallax scroll?\",\"datePublished\":\"2022-12-13T22:00:09+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\"},\"wordCount\":200,\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"keywords\":[\"javascript\",\"jquery\"],\"articleSection\":[\"Solved\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\",\"url\":\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\",\"name\":\"[Solved] Why isn't my image doing a parallax scroll? - JassWeb\",\"isPartOf\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#website\"},\"datePublished\":\"2022-12-13T22:00:09+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/jassweb.com\/solved\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"[Solved] Why isn&#8217;t my image doing a parallax scroll?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/jassweb.com\/solved\/#website\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"name\":\"JassWeb\",\"description\":\"Build High-quality Websites\",\"publisher\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/jassweb.com\/solved\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/jassweb.com\/solved\/#organization\",\"name\":\"Jass Web\",\"url\":\"https:\/\/jassweb.com\/solved\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"contentUrl\":\"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png\",\"width\":693,\"height\":132,\"caption\":\"Jass Web\"},\"image\":{\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31\",\"name\":\"Kirat\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"contentUrl\":\"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750\",\"caption\":\"Kirat\"},\"sameAs\":[\"http:\/\/jassweb.com\"],\"url\":\"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"[Solved] Why isn't my image doing a parallax scroll? - JassWeb","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/","og_locale":"en_US","og_type":"article","og_title":"[Solved] Why isn't my image doing a parallax scroll? - JassWeb","og_description":"[ad_1] You do get your scrolltop in the console like that, on codepen, but likely not on local. Learn about $(document).ready(function(){ Always load the jQuery src first, after the body element, then the rest of the JS code. Or inline it after the body closing tag. But always the jQuery first. Then , depending on ... Read more","og_url":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/","og_site_name":"JassWeb","article_published_time":"2022-12-13T22:00:09+00:00","author":"Kirat","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kirat","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/#article","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/"},"author":{"name":"Kirat","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31"},"headline":"[Solved] Why isn&#8217;t my image doing a parallax scroll?","datePublished":"2022-12-13T22:00:09+00:00","mainEntityOfPage":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/"},"wordCount":200,"publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"keywords":["javascript","jquery"],"articleSection":["Solved"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/","url":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/","name":"[Solved] Why isn't my image doing a parallax scroll? - JassWeb","isPartOf":{"@id":"https:\/\/jassweb.com\/solved\/#website"},"datePublished":"2022-12-13T22:00:09+00:00","breadcrumb":{"@id":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/jassweb.com\/solved\/solved-why-isnt-my-image-doing-a-parallax-scroll\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/jassweb.com\/solved\/"},{"@type":"ListItem","position":2,"name":"[Solved] Why isn&#8217;t my image doing a parallax scroll?"}]},{"@type":"WebSite","@id":"https:\/\/jassweb.com\/solved\/#website","url":"https:\/\/jassweb.com\/solved\/","name":"JassWeb","description":"Build High-quality Websites","publisher":{"@id":"https:\/\/jassweb.com\/solved\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/jassweb.com\/solved\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/jassweb.com\/solved\/#organization","name":"Jass Web","url":"https:\/\/jassweb.com\/solved\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/","url":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","contentUrl":"https:\/\/jassweb.com\/wp-content\/uploads\/2021\/02\/jass-website-logo-1.png","width":693,"height":132,"caption":"Jass Web"},"image":{"@id":"https:\/\/jassweb.com\/solved\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/65c9c7b7958150c0dc8371fa35dd7c31","name":"Kirat","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/jassweb.com\/solved\/#\/schema\/person\/image\/","url":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","contentUrl":"https:\/\/jassweb.com\/solved\/wp-content\/litespeed\/avatar\/1261af3c9451399fa1336d28b98ea3bb.jpg?ver=1775798750","caption":"Kirat"},"sameAs":["http:\/\/jassweb.com"],"url":"https:\/\/jassweb.com\/solved\/author\/jaspritsinghghumangmail-com\/"}]}},"_links":{"self":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/25881","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/comments?post=25881"}],"version-history":[{"count":0,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/posts\/25881\/revisions"}],"wp:attachment":[{"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/media?parent=25881"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/categories?post=25881"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/jassweb.com\/solved\/wp-json\/wp\/v2\/tags?post=25881"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}