Develop Reference

Solution for hyphen word [duplicate]

This question already has answers here:
Regex to match words with hyphens and/or apostrophes
(7 answers)
Closed 4 months ago.
I am wondering about this case:
Is it possible to do something like that?
if word, for example co-worker is hyphen, jquery can take detect and take word and replace with class inside?
Example:
<span class="hyphenated-word">co-worker</span>
I think something about preg.replace function, but not sure how to detect word.
Can anybody give me a tip for this?

You could use a regex to detect any hyphenated word:
function highlightHyphenated(element) {
// Regular expression matching any group composed by:
// - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones), followed by
// - `-` a hyphen, followed by
// - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones)
const re = /([A-Za-zÀ-ÖØ-öø-ÿ]+-[A-Za-zÀ-ÖØ-öø-ÿ]+)/gim;
if (re.test(element.innerText)) {
element.innerHTML = element.innerHTML.replace(re, '<span class="hyphenated">$1</span>');
}
}
document.querySelectorAll('p').forEach(el => highlightHyphenated(el));
.hyphenated {
display: inline-block;
background-color: yellow;
font-weight: bold;
}
<p>Lorem ipsum dolor sit-amet, consectetur adipiscing elit. Etiam orci tortor, aliquet quis mollis in, posuere id ipsum. Vestibulum quis nibh augue. Sed id congue ex. Suspendisse eget elit fringilla, commodo mi vitae, luctus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus quam vitae leo eleifend, a laoreet neque varius. Morbi quis posuere risus, at scelerisque dui. Morbi sit amet lorem purus. Pellentesque auctor ut libero sed tempor. Integer vitae erat id leo porttitor blandit. Duis cursus lacus quis mauris facilisis, dapibus auctor nisl feugiat. Donec consectetur dolor eu suscipit aliquam. Fusce magna ante, luctus a arcu at, volutpat blandit tortor. Vivamus bibendum sem id mauris dapibus, et ultricies elit fermentum. Aliquam eu efficitur ipsum. Pellentesque eu velit ipsum.</p>
<p>Sed-fermentum lorem a ipsum sodales, vel vestibulum odio hendrerit. Aenean auctor ipsum in urna finibus, eu vulputate massa rutrum. Curabitur id eros pulvinar, dapibus justo nec, euismod sem. Ut ornare turpis velit, non aliquet est rhoncus eu. Etiam ex dolor, congue eleifend nisl eget, tempus dictum nulla. Integer ultricies enim eu mattis sagittis. Aliquam malesuada condimentum semper. Aliquam erat volutpat. Integer in dapibus sapien, tempor venenatis nisi. Curabitur eget sapien vitae nisi pulvinar volutpat aliquet ut augue. Cras pretium congue est, at pulvinar velit egestas vitae. Pellentesque non dui et urna posuere mattis.</p>
<p>Fusce consectetur vel purus a rutrum. Nulla vitae-metus nec eros facilisis porta. Ut quis sem ac nibh finibus porta egestas ac neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sagittis nisl ante, vel placerat dui fermentum eu. Quisque placerat placerat neque. Nullam vel euismod nisl. Nullam aliquet enim vitae odio ultricies tincidunt. Nullam sagittis arcu at eleifend commodo. In hac habitasse platea dictumst. Nunc nibh lacus, pharetra nec sapien quis, congue pharetra felis. Vivamus porta, ex et convallis sagittis, ex dui porttitor augue, et tempus neque risus quis diam. Morbi eget leo lectus.</p>
<p>Sed at justo euismod, luctus lorem ut, dignissim libero. Curabitur vel auctor neque, vel ultrices nulla. Duis in aliquet-ligula. Aliquam sed est nisl. Aliquam enim orci, congue eget erat sed, imperdiet pharetra est. Fusce efficitur a tortor-nec fringilla. Sed sed tempus tellus, efficitur ornare lorem. Proin risus sem, mollis et lectus nec, rhoncus accumsan magna. Mauris hendrerit ligula eu est pretium, id bibendum ante tincidunt. Nam cursus vehicula diam, in eleifend magna blandit at. Vestibulum sit amet bibendum elit.</p>
<p>Donec magna est, placerat in vehicula eget, convallis non metus. Proin posuere ultricies neque a scelerisque. Quisque eu ex quis magna varius-vulputate. Sed venenatis dapibus iaculis. Cras lacinia ex et ante mollis, et condimentum ante porta. Sed tempus diam at fringilla condimentum. Aenean est ex, sollicitudin at blandit ac, dapibus eu mauris. Sed a tincidunt arcu. Maecenas sagittis cursus eros, ut commodo neque maximus id. Aenean accumsan purus eu tortor eleifend, vel volutpat turpis tempus. Vestibulum et metus non eros rhoncus placerat. Donec congue enim libero. Cras placerat, urna eu tincidunt aliquam, nisl odio viverra felis, id volutpat ipsum libero a leo.</p>
If you do not care about accented letters, you can replace [A-Za-zÀ-ÖØ-öø-ÿ]+ with [A-Za-z]+

Top Tab Navigator height problem when wrapped in ScrollView

I have this basic Tab component wrapped in a ScrollView:
const MyTab = () => {
return (
<ScrollView>
<View style={{flex:1}}>
<Tab.Navigator
initialRouteName="GeneralInformations"
>
<Tab.Screen name="GeneralInformations" component={LoremIpsum} />
<Tab.Screen name="TransactionsTab" component={LoremIpsum} />
</Tab.Navigator>
</View>
</ScrollView>
)
}
Each screen have this basic View component:
const LoremIpsum = () => (
<View>
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fermentum augue a mi semper, et aliquet arcu tempor. Suspendisse ante nunc, iaculis quis purus nec, consectetur molestie nibh. Etiam non ex facilisis, placerat erat vitae, blandit eros. Pellentesque ac posuere urna. Vivamus tempor diam a condimentum gravida. Ut et placerat justo. Duis a rutrum odio. Nulla sed dolor rhoncus, vestibulum velit eget, cursus neque. Nulla facilisi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Quisque interdum magna a fermentum efficitur. Nunc non tellus vitae leo luctus dignissim.
Integer laoreet suscipit sem id ullamcorper. Aliquam euismod sodales nisl sit amet imperdiet. Praesent fermentum magna tellus, nec tristique quam fringilla sit amet. Sed ut risus non urna congue maximus. Sed eros leo, dictum eget metus vitae, laoreet porttitor leo. Nullam sed lacinia neque. Nulla facilisi. Vestibulum vel aliquam elit, et faucibus lorem. Sed sit amet tincidunt eros.
Proin imperdiet orci vel accumsan pharetra. Quisque nec lorem nec purus cursus feugiat at ac lorem. Sed luctus porttitor ante, a mollis dui facilisis non. Mauris venenatis ultricies nisi sed ornare. In a volutpat ex. Quisque at arcu a ante vestibulum pellentesque. Morbi eu semper sem, eu imperdiet odio. Etiam non eleifend ligula. Phasellus gravida tellus a ligula efficitur feugiat. Nulla ligula mauris, consequat ac mollis in, tincidunt aliquet sapien. Suspendisse ultricies quam ac velit ultricies mattis.
Sed dictum semper pellentesque. Donec ultricies diam a justo consectetur tincidunt. Fusce cursus dignissim nisi. Aliquam ut commodo nulla, non fringilla risus. Donec egestas massa et ligula accumsan, at condimentum ex pellentesque. In non interdum sapien, sed efficitur libero. Nulla eu neque eleifend, sodales risus ac, dictum sapien. Sed molestie quam sit amet lacinia vehicula. Suspendisse pellentesque maximus libero quis laoreet. Sed vel nisl non magna feugiat lobortis. Proin ac dui sit amet dolor pulvinar placerat. Nam quis sem eu mi vulputate ornare. In rhoncus nunc vitae nibh fringilla maximus.
Nullam ornare volutpat vulputate. Praesent quis purus sem. Duis facilisis, ipsum sit amet efficitur finibus, turpis velit molestie sapien, eget commodo sapien nisi et massa. In enim mauris, sollicitudin eu est non, elementum mollis turpis. Maecenas mauris magna, sodales sed odio sit amet, consequat feugiat sapien. Cras blandit non massa non dictum. Vestibulum finibus eu felis sed sollicitudin. Aliquam dignissim semper felis, vel lacinia augue egestas nec. Curabitur gravida, lacus non mattis mattis, lectus leo lacinia ante, eu laoreet erat sem ut ex. Fusce ante orci, aliquet nec mi ac, tincidunt semper est. Quisque lobortis, ante viverra lacinia gravida, ipsum nisl ornare enim, vitae sollicitudin libero tellus nec ligula. Cras ultrices metus eget ex faucibus, sed sodales est pretium. Cras ac purus enim. Sed dui dolor, porttitor non odio vel, efficitur sagittis diam. Mauris malesuada libero vitae purus rhoncus ornare. Quisque turpis mi, ullamcorper eget felis ac, molestie aliquam lectus.
Maecenas nulla lacus, ornare vitae mauris ut, placerat porta augue. Mauris eget ullamcorper tellus. Mauris accumsan lacus eu diam tincidunt tincidunt. Vestibulum accumsan ultricies purus, nec pretium eros ultrices ut. Morbi facilisis at est vel hendrerit. Nunc justo orci, tincidunt in condimentum eu, consectetur quis tortor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus sit amet sem varius, convallis ante non, semper mauris. Maecenas aliquet aliquet justo, a aliquam nunc. Suspendisse dignissim, tortor nec imperdiet condimentum, mauris purus malesuada enim, at mattis arcu felis at dui. Maecenas vitae lacus tincidunt, commodo massa ut, feugiat diam. Nam elementum quam vitae enim rhoncus tempor. Phasellus sit amet placerat quam. Cras dolor erat, sollicitudin a metus vel, aliquet commodo neque.
Cras vel pellentesque ipsum. Fusce et dictum augue. Quisque vulputate in purus quis molestie. Proin id nunc aliquet, blandit tortor ut, tristique lectus. Aliquam malesuada nulla a leo varius ullamcorper. Nam aliquet semper lorem et vestibulum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus sagittis, mauris id lobortis mattis, ligula ante tincidunt nisi, sodales imperdiet leo mi et nisl. Curabitur consectetur mollis tortor, ut tincidunt augue aliquet sed.
</Text>
</View>
)
But the default behavior is that the components don't show up:
However, if I manually set the height of the parent View (that wraps my Tab.Navigator component) the components starts to show up, but not the entire component, just as much as the height value. Ex, if I set height:500:
Set height:'100%' also doesn't work either because it only shows up to the height of the screen, but the component is bigger than it.
I need to show the entire LoremIpsum component, and I need the ScrollView to work. The only way I got it is by manually setting the height (as I said before) but I want to use components with different heights.
I really need to use this ScrollView parent... anyone know what is this?

Window Scroll listener for multiple divs at once?

So I'd like to build an indicator in a fixed nav bar that shows a user which section of a page they are on, and changes appropriately as they scroll, essentially recreating this Bootstrap effect.
Here's what I have so far:
HTML
<li class='page-nav' data-dest='thing1'><a>Event Info</a></li>
<li class='page-nav' data-dest='thing2'><a>Venue</a></li>
JS
var sections = [];
$('.page-nav').each(function() {
var destination = $(this).data('dest');
sections.push('#'+destination);
})
This gives me an array like this:
["#thing1", "#thing2"]
How could I then write a window.scroll function to watch if any of the DOM elements from the array enter scrollspy? Something like:
$(window).scroll(function () {
($(any-of-the-sections).on('scrollSpy:enter', function() {
$(whichever-section-entered).addClass('active');
})
})

Try the following:
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta charset="utf-8">
</head>
<body>
<ul>
<li class='page-nav' data-dest='thing1'>Event Info</li>
<li class='page-nav' data-dest='thing2'>Venue</li>
</ul>
<hr>
<div id="thing1">
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
<p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
<p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
</div>
<hr>
<div id="thing2">
<p>Mauris in lacus metus. Sed vitae aliquet ligula. Sed eget arcu ornare lacus efficitur interdum quis at dui. Cras rhoncus, odio eget ultricies sollicitudin, sem sapien scelerisque leo, sit amet auctor nibh risus at erat. Sed vitae metus pretium neque porttitor sollicitudin pellentesque laoreet lacus. Donec luctus tellus et maximus venenatis. Nulla eget aliquet nulla, aliquet cursus purus. In viverra erat a pharetra egestas. In id faucibus velit, et sagittis ex. Aliquam ut semper nunc. Sed id tempus nisl. Nunc tincidunt porta velit, sit amet sagittis velit porttitor ut. Cras feugiat pulvinar augue in consectetur. Praesent quis nisl purus. Suspendisse aliquet metus eros, a aliquet risus viverra consectetur. Aliquam a nulla sit amet erat iaculis facilisis.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ut enim molestie, ullamcorper eros in, vehicula enim. Proin id blandit turpis, sed varius dui. Suspendisse sodales nec nisi interdum aliquam. Cras auctor orci orci. Mauris sit amet iaculis leo, eget aliquam turpis. Proin ac dapibus mi. Nullam arcu risus, elementum ut felis et, pellentesque aliquet felis. Proin interdum luctus aliquet.</p>
<p>Curabitur laoreet, mi scelerisque pharetra consequat, ex urna volutpat ligula, eu sodales nisi felis nec tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vivamus libero neque, dictum in metus vel, lobortis sodales odio. Nullam vestibulum at dolor et semper. Sed ac nibh malesuada, consectetur est ut, gravida dolor. Etiam rhoncus ultricies arcu sed pretium. Curabitur accumsan vel erat ac porttitor.</p>
<p>Proin nec lorem magna. Nullam lectus ex, rhoncus non libero ornare, placerat pharetra turpis. Sed commodo dui ut dictum ullamcorper. Nunc dui mi, iaculis non elit ac, pretium mattis nunc. Curabitur interdum dignissim quam, quis vulputate lectus. Sed enim massa, faucibus quis ante ac, eleifend scelerisque velit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nam blandit accumsan rhoncus. Donec sagittis egestas tellus, non scelerisque dolor commodo porta. Ut vehicula suscipit orci vel bibendum. Nulla facilisi. Cras sit amet molestie urna, quis blandit metus. Sed a arcu massa. Integer varius finibus neque in venenatis.</p>
<p>Sed suscipit libero eros, ut dictum orci ullamcorper eu. Suspendisse hendrerit arcu felis, eget fermentum erat vulputate vitae. In sagittis sapien sed ex maximus commodo. Maecenas ultrices, ex eu commodo iaculis, massa tortor posuere lorem, sit amet sodales purus odio pellentesque nunc. Donec tellus enim, finibus id tincidunt et, vestibulum a justo. Morbi venenatis sapien sit amet interdum dictum. Vivamus et diam justo. Nunc ultrices placerat nibh, in convallis justo efficitur a. Morbi ut pharetra urna. Vestibulum id nulla id tellus fringilla mollis in non lorem. Ut vitae diam accumsan, finibus velit eget, cursus orci. Ut sem enim, mollis ut ullamcorper quis, scelerisque vitae ex.</p>
</div>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="scrollspy.js"></script>
<script>
var sections = [];
$('.page-nav').each(function() {
var destination = $(this).data('dest');
sections.push('#'+destination);
});
$.each(sections, function(index, value) {
var section = $(sections[index]);
$(section).scrollSpy();
$(section).on('scrollSpy:enter', function() {
$(this).addClass('active');
});
$(section).on('scrollSpy:exit', function() {
$(this).removeClass('active');
});
});
</script>
</body>
</html>
In the above code, it's possible for more than one section to be active at any given time. Just because #thing2 has become visible doesn't mean that #thing1 has necessarily scrolled outside of the viewport yet.
If you want to ensure that only one section has the active class at any given time, then you can delete the scrollSpy:exit event handler and modify the scrollSpy:enter event handler to look like this:
$(section).on('scrollSpy:enter', function() {
$.each(sections, function(index, value) {
$(sections[index]).removeClass('active');
});
$(this).addClass('active');
});
In this modified version of the code, when a section scrolls into view, we remove the active class from every section before adding it to the one that has scrolled into view.

jquery code not working in site

What's happening is that my code is working on local server, but it's not working in my site here http://lucrebem.com.br/blog/emponline/47-ganhe-dinheiro-atraves-de-downloads, in the site the code is configured to display a banner ad after the 5 first words of the post, but it's not displaying. I have jquery settle, loaded and working on the site with all the other dependent scripts, and no jquery conflicts at all, but this particular script isn't working.
Fiddle: http://jsfiddle.net/ku6L240c
The HTML:
<div style="width:450px; margin-left:auto; margin-right:auto" class="newsitem_text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pellentesque urna eu pulvinar maximus. Sed elit nunc, vestibulum ut eros vitae, pellentesque rhoncus ipsum. In et metus non diam porttitor maximus iaculis nec lectus. Quisque sodales scelerisque auctor. Nam rutrum venenatis eros, eu condimentum erat placerat ut. Pellentesque sed tempus sem, eu viverra ipsum. Vestibulum nec turpis convallis, dapibus massa vitae, posuere mauris. Suspendisse mattis tincidunt lorem. Aliquam erat volutpat. Nullam at tincidunt erat, maximus laoreet ipsum.
Quisque nunc neque, semper tincidunt placerat eget, blandit a ante. Suspendisse pulvinar, velit eu ultrices pulvinar, lacus sapien tincidunt ipsum, eget sollicitudin mauris eros molestie ex. Etiam quis orci dui. Phasellus vestibulum mollis molestie. Nam condimentum ornare nisl, sed finibus risus tempus vel. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Interdum et malesuada fames ac ante ipsum primis in faucibus.
Vestibulum eget ullamcorper lorem. Aliquam mollis elit in sem dapibus dapibus. Proin vel massa a arcu dictum tincidunt in ut ante. Sed feugiat tempus dictum. Praesent in leo ullamcorper, sodales turpis et, vehicula tellus. Duis pellentesque dui ac turpis tristique imperdiet. Sed sed orci lectus.
Suspendisse non egestas sem, sed tincidunt sem. Etiam laoreet dui sem. Mauris hendrerit massa tempus, euismod arcu sit amet, eleifend quam. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus id fringilla mauris. Cras dapibus non lacus at finibus. Nullam vitae sagittis neque. Mauris libero velit, interdum non vehicula non, lacinia non augue. Maecenas elementum lacinia interdum.
Morbi eget mollis nisl. Integer accumsan condimentum tellus, lacinia pellentesque urna volutpat a. Nullam semper sem et erat commodo sollicitudin. Proin rhoncus felis eu aliquam venenatis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla pretium velit eu molestie condimentum. Vestibulum vitae velit mi. Integer nec leo quam. Nam pulvinar ligula congue consectetur tristique. Donec placerat faucibus diam sit amet fermentum. Ut id pellentesque risus. Nunc lacus orci, rhoncus ut risus sed, mattis posuere tellus. Nulla pellentesque eros sed neque consectetur dictum.</div>
The javascript:
var wordList = $(".newsitem_text").html().split(' ');
var newHtml = '';
$.each(wordList, function(index, word) {
newHtml += ' ' + word;
if (index == 50) {
newHtml += '<img width="300px" src="https://s-media-cache-ak0.pinimg.com/originals/ee/db/75/eedb7503296066298474bd535b4597cc.gif" />'
}
});
$(".newsitem_text").html(newHtml);

Reveal image as user scrolls down

I was checking this website: http://www.flagofplanetearth.com/
You can see, the images reveal more as you scroll down.
I have seen such an effect on only a few other websites and was wondering how it is done. I don't even know what it's called so couldn't really search for it.
Thanks.

It's called a parralax effect.
Here's a great documentation on how it works
Cheers!

That's a parallax effect.
Simple method: (fixed image)
.parallax {
background-attachment: fixed;
}
Advanced method: (what you saw)
1) Use same CSS
2) Use the following JS:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
Check out this:
var parallax = document.getElementById('parallax');
window.addEventListener('scroll', function() {
var ypos = window.pageYOffset;
parallax.style.backgroundPositionY = (ypos * -0.5) + "px";
});
#parallax {
background-image: url('http://lorempixel.com/400/400/abstract/');
background-attachment: fixed;
min-height: 400px;
}
<div id="parallax"></div>
<div id="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque et arcu est. Praesent nec lacinia mi. Nulla augue erat, egestas at tortor et, gravida aliquet erat. Proin in rutrum velit. Vestibulum volutpat, leo et rutrum gravida, mauris urna malesuada justo, ut condimentum diam neque non nisi. Aenean malesuada, nisi non dapibus imperdiet, leo libero iaculis dolor, in convallis augue ante nec urna. Suspendisse vulputate vel ex dictum aliquet. Aliquam dapibus scelerisque dapibus. In ut lorem a leo feugiat iaculis cursus sit amet lectus. Integer id ante sed mi egestas tincidunt. Duis maximus augue eu ipsum ultrices dictum.
<br><br>
Proin eget enim auctor, vehicula dui eget, vulputate leo. Donec pulvinar diam interdum, vulputate erat nec, blandit risus. Fusce tristique velit libero, porttitor egestas libero feugiat ullamcorper. Maecenas bibendum tristique efficitur. Cras fringilla ac eros nec iaculis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus ut sapien molestie, molestie magna nec, consectetur velit. Etiam vestibulum pretium quam ac imperdiet. Nullam quis nisl eget felis vestibulum bibendum nec id velit. In vel commodo nisi, nec euismod quam. Duis ultrices pretium imperdiet.
<br><br>
Pellentesque quis velit lectus. Morbi id tincidunt libero. Fusce id convallis nulla, sed porttitor eros. Morbi eget libero vel mi efficitur placerat. Fusce sed commodo ex. Nulla gravida enim et elementum fringilla. Vestibulum arcu dui, suscipit ut mauris ut, iaculis aliquam tellus. Praesent in volutpat justo. Morbi volutpat metus at magna rhoncus, in molestie odio vestibulum. In vel euismod nibh. Phasellus ac dictum velit. Donec tincidunt lacus a diam tempor luctus ac ut eros. Etiam condimentum nunc in ex malesuada vestibulum. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
<br><br>
Fusce tortor magna, fringilla sit amet dignissim in, euismod quis augue. Phasellus egestas erat eu pellentesque blandit. Vivamus vitae pellentesque arcu. Quisque commodo, leo sed auctor tincidunt, erat sem blandit nulla, quis vestibulum magna lorem sed tellus. Suspendisse ultricies hendrerit eleifend. Cras viverra, diam vitae vulputate mattis, quam augue aliquet odio, sit amet dapibus felis odio id lectus. Proin sit amet ornare mauris, quis sodales diam. In hac habitasse platea dictumst. Quisque eget hendrerit tellus. Suspendisse vulputate non dui vel auctor.
<br><br>
Curabitur volutpat eros tellus, ut fringilla nibh cursus eget. Aenean sed urna et nulla aliquet tempor. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque euismod fermentum risus, sit amet semper enim. Morbi pulvinar sapien a commodo tempor. Duis ut tellus malesuada, consequat neque a, accumsan nibh. Pellentesque convallis neque sed odio tempor, quis vestibulum eros viverra. Nunc tincidunt ligula ut dolor mattis, eget mollis velit scelerisque. Fusce sed enim sollicitudin, aliquam mi non, mattis diam. Nullam faucibus massa id nisl sagittis, id pharetra enim pharetra. Ut a varius libero, ac malesuada arcu.</div>