I have a section in my website which is built using HTML and CSS, the section is contains a scrollbar with it for users to scroll down, the complete code is below:
var prevScrollpos = window.pageYOffset;
window.onscroll = function() {
var currentScrollPos = window.pageYOffset;
if (prevScrollpos > currentScrollPos) {
document.getElementById("zaif").style.top = "0";
} else {
document.getElementById("zaif").style.top = "-50px";
}
prevScrollpos = currentScrollPos;
}.wrapsaipy {
width: 95%;
margin: 5px auto;
max-width: 900px;
font-weight: 100;
font-family: 'Roboto', sans-serif;
}
.wrapsaipy h1 {
font-weight: 100;
}
.termssaipy {
color: #fff;
height: 480px;
cursor: move;
padding: 10px;
background: #43cea2;
background: -webkit-linear-gradient(to right, #f2136e, #0cc3eb);
background: -webkit-gradient(linear, left top, right top, from(#f2136e), to(#0cc3eb));
background: -webkit-linear-gradient(left, #f2136e, #0cc3eb);
background: -o-linear-gradient(left, #f2136e, #0cc3eb);
background: linear-gradient(to right, #f2136e, #0cc3eb);
overflow-y: scroll;
border-radius: 3px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
.termssaipy p {
line-height: 25px;
}
.choicessaipy {
margin-top: 40px;
}<div class="kuttan" id="zaif">
<div class="containerkuttan">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<span class="textkuttan"><b>Scroll down</b></span>
</div>
</div>
<div class="wrapsaipy">
<h1><b>TERMS AND CONDITIONS</b></h1>
<div class="termssaipy">
<p>The terms "We" / "Us" / "Our"/”Company” individually and collectively refer to FireZeal Internet Solutions Private Limited and the terms "Visitor” ”User” refer to the users.</p>
<p>This page states the Terms and Conditions under which you (Visitor) may visit this website (“Website”). Please read this page carefully. If you do not accept the Terms and Conditions stated here, we would request you to exit this site. The business,
any of its business divisions and / or its subsidiaries, associate companies or subsidiaries to subsidiaries or such other investment companies (in India or abroad) reserve their respective rights to revise these Terms and Conditions at any time
by updating this posting. You should visit this page periodically to re-appraise yourself of the Terms and Conditions, because they are binding on all users of this Website.</p>
<h3><b>USE OF CONTENT</b></h3>
<p>All logos, brands, marks headings, labels, names, signatures, numerals, shapes or any combinations thereof, appearing in this site, except as otherwise noted, are properties either owned, or used under licence, by the business and / or its associate
entities who feature on this Website. The use of these properties or any other content on this site, except as provided in these terms and conditions or in the site content, is strictly prohibited.</p>
<p>You may not sell or modify the content of this Website or reproduce, display, publicly perform, distribute, or otherwise use the materials in any way for any public or commercial purpose without the respective organisation’s or entity’s written permission.</p>
<h3><b>ACCEPTABLE WEBSITE USE</b></h3>
<h5><b>(A) Security Rules</b></h5>
<p>Visitors are prohibited from violating or attempting to violate the security of the Web site, including, without limitation, (1) accessing data not intended for such user or logging into a server or account which the user is not authorised to access,
(2) attempting to probe, scan or test the vulnerability of a system or network or to breach security or authentication measures without proper authorisation, (3) attempting to interfere with service to any user, host or network, including, without
limitation, via means of submitting a virus or "Trojan horse" to the Website, overloading, "flooding", "mail bombing" or "crashing", or (4) sending unsolicited electronic mail, including promotions and/or advertising of products or services. Violations
of system or network security may result in civil or criminal liability. The business and / or its associate entities will have the right to investigate occurrences that they suspect as involving such violations and will have the right to involve,
and cooperate with, law enforcement authorities in prosecuting users who are involved in such violations.
</p>
<h5><b>(B) General Rules</b></h5>
<p>Visitors may not use the Web Site in order to transmit, distribute, store or destroy material (a) that could constitute or encourage conduct that would be considered a criminal offence or violate any applicable law or regulation, (b) in a manner that
will infringe the copyright, trademark, trade secret or other intellectual property rights of others or violate the privacy or publicity of other personal rights of others, or (c) that is libellous, defamatory, pornographic, profane, obscene, threatening,
abusive or hateful.</p>
<h3><b>INDEMNITY</b></h3>
<p>The User unilaterally agree to indemnify and hold harmless, without objection, the Company, its officers, directors, employees and agents from and against any claims, actions and/or demands and/or liabilities and/or losses and/or damages whatsoever
arising from or resulting from their use of or their breach of the terms .</p>
<h3><b>LIABILITY</b></h3>
<p>User agrees that neither company nor its group companies, directors, officers or employee shall be liable for any direct or/and indirect or/and incidental or/and special or/and consequential or/and exemplary damages, resulting from the use or/and
the inability to use the service or/and for cost of procurement of substitute goods or/and services or resulting from any goods or/and data or/and information or/and services purchased or/and obtained or/and messages received or/and transactions
entered into through or/and from the service or/and resulting from unauthorized access to or/and alteration of user's transmissions or/and data or/and arising from any other matter relating to the service, including but not limited to, damages for
loss of profits or/and use or/and data or other intangible, even if companyhas been advised of the possibility of such damages.</p>
<p>User further agrees that company shall not be liable for any damages arising from interruption, suspension or termination of service, including but not limited to direct or/and indirect or/and incidental or/and special consequential or/and exemplary
damages, whether such interruption or/and suspension or/and termination was justified or not, negligent or intentional, inadvertent or advertent. User agrees that companyshall not be responsible or liable to user, or anyone, for the statements or
conduct of any third party of the service. In sum, in no event shall Company's total liability to the User for all damages or/and losses or/and causes of action exceed the amount paid by the User to company, if any, that is related to the cause
of action.</p>
<h3><b>DISCLAIMER OF CONSEQUENTIAL DAMAGES</b></h3>
<p>In no event shall Company or any parties, organizations or entities associated with the corporate brand name us or otherwise, mentioned at this Website be liable for any damages whatsoever (including, without limitations, incidental and consequential
damages, lost profits, or damage to computer hardware or loss of data information or business interruption) resulting from the use or inability to use the Website and the Website material, whether based on warranty, contract, tort, or any other
legal theory, and whether or not, such organization or entities were advised of the possibility of such damages.</p>
</div>
</div>As you can see I have given a div saying “scroll down” so users will understand there is content below. I want the div to be hidden when the user scrolls the bar, as you can see I have given JavaScript to it, but it’s not working. Can anyone please tell me what could be wrong here.
Advertisement
Answer
var lastScrollTop = 50;
// chose at what distance to hide div
document.getElementById("frame").onscroll = function() {
//attach scroll event to your scroll-able div (added id="frame" to html)
var st = window.pageYOffset || document.getElementById("frame").scrollTop;
//calculate distance
if (st > lastScrollTop) {
document.getElementById("zaif").style.display = "none";
console.clear();
console.log(st)
console.log("scrooling div down")
} else {
document.getElementById("zaif").style.display = "block";
console.clear();
console.log(st)
console.log("scrooled back to top")
}
}.wrapsaipy {
width: 95%;
margin: 5px auto;
max-width: 900px;
font-weight: 100;
font-family: 'Roboto', sans-serif;
}
.wrapsaipy h1 {
font-weight: 100;
}
.termssaipy {
color: #fff;
height: 480px;
cursor: move;
padding: 10px;
background: #43cea2;
background: -webkit-linear-gradient(to right, #f2136e, #0cc3eb);
background: -webkit-gradient(linear, left top, right top, from(#f2136e), to(#0cc3eb));
background: -webkit-linear-gradient(left, #f2136e, #0cc3eb);
background: -o-linear-gradient(left, #f2136e, #0cc3eb);
background: linear-gradient(to right, #f2136e, #0cc3eb);
overflow-y: scroll;
border-radius: 3px;
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.9);
}
.termssaipy p {
line-height: 25px;
}
.choicessaipy {
margin-top: 40px;
}<div class="kuttan" id="zaif">
<div class="containerkuttan">
<div class="chevron"></div>
<div class="chevron"></div>
<div class="chevron"></div>
<span class="textkuttan"><b>Scroll down</b></span>
</div>
</div>
<div class="wrapsaipy">
<h1><b>TERMS AND CONDITIONS</b></h1>
<div class="termssaipy" id="frame">
<p>The terms "We" / "Us" / "Our"/”Company” individually and collectively refer to FireZeal Internet Solutions Private Limited and the terms "Visitor” ”User” refer to the users.</p>
<p>This page states the Terms and Conditions under which you (Visitor) may visit this website (“Website”). Please read this page carefully. If you do not accept the Terms and Conditions stated here, we would request you to exit this site. The business,
any of its business divisions and / or its subsidiaries, associate companies or subsidiaries to subsidiaries or such other investment companies (in India or abroad) reserve their respective rights to revise these Terms and Conditions at any time
by updating this posting. You should visit this page periodically to re-appraise yourself of the Terms and Conditions, because they are binding on all users of this Website.</p>
<h3><b>USE OF CONTENT</b></h3>
<p>All logos, brands, marks headings, labels, names, signatures, numerals, shapes or any combinations thereof, appearing in this site, except as otherwise noted, are properties either owned, or used under licence, by the business and / or its associate
entities who feature on this Website. The use of these properties or any other content on this site, except as provided in these terms and conditions or in the site content, is strictly prohibited.</p>
<p>You may not sell or modify the content of this Website or reproduce, display, publicly perform, distribute, or otherwise use the materials in any way for any public or commercial purpose without the respective organisation’s or entity’s written permission.</p>
<h3><b>ACCEPTABLE WEBSITE USE</b></h3>
<h5><b>(A) Security Rules</b></h5>
<p>Visitors are prohibited from violating or attempting to violate the security of the Web site, including, without limitation, (1) accessing data not intended for such user or logging into a server or account which the user is not authorised to access,
(2) attempting to probe, scan or test the vulnerability of a system or network or to breach security or authentication measures without proper authorisation, (3) attempting to interfere with service to any user, host or network, including, without
limitation, via means of submitting a virus or "Trojan horse" to the Website, overloading, "flooding", "mail bombing" or "crashing", or (4) sending unsolicited electronic mail, including promotions and/or advertising of products or services. Violations
of system or network security may result in civil or criminal liability. The business and / or its associate entities will have the right to investigate occurrences that they suspect as involving such violations and will have the right to involve,
and cooperate with, law enforcement authorities in prosecuting users who are involved in such violations.
</p>
<h5><b>(B) General Rules</b></h5>
<p>Visitors may not use the Web Site in order to transmit, distribute, store or destroy material (a) that could constitute or encourage conduct that would be considered a criminal offence or violate any applicable law or regulation, (b) in a manner that
will infringe the copyright, trademark, trade secret or other intellectual property rights of others or violate the privacy or publicity of other personal rights of others, or (c) that is libellous, defamatory, pornographic, profane, obscene, threatening,
abusive or hateful.</p>
<h3><b>INDEMNITY</b></h3>
<p>The User unilaterally agree to indemnify and hold harmless, without objection, the Company, its officers, directors, employees and agents from and against any claims, actions and/or demands and/or liabilities and/or losses and/or damages whatsoever
arising from or resulting from their use of or their breach of the terms .</p>
<h3><b>LIABILITY</b></h3>
<p>User agrees that neither company nor its group companies, directors, officers or employee shall be liable for any direct or/and indirect or/and incidental or/and special or/and consequential or/and exemplary damages, resulting from the use or/and
the inability to use the service or/and for cost of procurement of substitute goods or/and services or resulting from any goods or/and data or/and information or/and services purchased or/and obtained or/and messages received or/and transactions
entered into through or/and from the service or/and resulting from unauthorized access to or/and alteration of user's transmissions or/and data or/and arising from any other matter relating to the service, including but not limited to, damages for
loss of profits or/and use or/and data or other intangible, even if companyhas been advised of the possibility of such damages.</p>
<p>User further agrees that company shall not be liable for any damages arising from interruption, suspension or termination of service, including but not limited to direct or/and indirect or/and incidental or/and special consequential or/and exemplary
damages, whether such interruption or/and suspension or/and termination was justified or not, negligent or intentional, inadvertent or advertent. User agrees that companyshall not be responsible or liable to user, or anyone, for the statements or
conduct of any third party of the service. In sum, in no event shall Company's total liability to the User for all damages or/and losses or/and causes of action exceed the amount paid by the User to company, if any, that is related to the cause
of action.</p>
<h3><b>DISCLAIMER OF CONSEQUENTIAL DAMAGES</b></h3>
<p>In no event shall Company or any parties, organizations or entities associated with the corporate brand name us or otherwise, mentioned at this Website be liable for any damages whatsoever (including, without limitations, incidental and consequential
damages, lost profits, or damage to computer hardware or loss of data information or business interruption) resulting from the use or inability to use the Website and the Website material, whether based on warranty, contract, tort, or any other
legal theory, and whether or not, such organization or entities were advised of the possibility of such damages.</p>
</div>
</div>