oek73159 oek73159 - 7 months ago 16
HTML Question

Need help applying this JavaScript code to my existing code

I've very nearly finished a simple music toggle button I've been working on and wanted it to fade into my page like the scroll to top button does on my website (like the one which you can see here when scrolling down).

I managed to get the javascript from the scroll to top button which looks as follows:

var start = {
setting: {
startline: 100,
scrollto: 0,
scrollduration: 1e3,
fadeduration: [500, 100]
},
controlHTML: '<img src=".../noaudio.png"/>',
},
state: {
isvisible: !1,
shouldvisible: !1
},
scrollup: function() {
this.cssfixedsupport || this.$control.css({
opacity: 0
});
var t = isNaN(this.setting.scrollto) ? this.setting.scrollto : parseInt(this.setting.scrollto);
t = "string" == typeof t && 1 == jQuery("#" + t).length ? jQuery("#" + t).offset().top : 0, this.$body.animate({
scrollTop: t
}, this.setting.scrollduration)
},
keepfixed: function() {
var t = jQuery(window),
o = t.scrollLeft() + t.width() - this.$control.width() - this.controlattrs.offsetx,
s = t.scrollTop() + t.height() - this.$control.height() - this.controlattrs.offsety;
this.$control.css({
left: o + "px",
top: s + "px"
})
},
togglecontrol: function() {
var t = jQuery(window).scrollTop();
this.cssfixedsupport || this.keepfixed(), this.state.shouldvisible = t >= this.setting.startline ? !0 : !1, this.state.shouldvisible && !this.state.isvisible ? (this.$control.stop().animate({
opacity: 1
}, this.setting.fadeduration[0]), this.state.isvisible = !0) : 0 == this.state.shouldvisible && this.state.isvisible && (this.$control.stop().animate({
opacity: 0
}, this.setting.fadeduration[1]), this.state.isvisible = !1)
},
init: function() {
jQuery(document).ready(function(t) {


I had a go at changing it to work for the new button I added but had no luck so far. [Here's what I've got so far.][2]

So, how can I make the new button fade in like the one on my website? Is there a way to do it with the code I linked above?

Thanks

Also, sorry for any errors. I still suck at coding.

Answer

https://jsfiddle.net/71uncr2g/8/

Try that. I was working on something like this right now. This is the jQuery code:

var amountScrolled = 300;

$(window).scroll(function() {
    if ( $(window).scrollTop() > amountScrolled ) {
        $('.fadebutton').fadeIn('slow');
    } else {
        $('.fadebutton').fadeOut('slow');
    }
});