Löschen einer JavaScript-Schaltfläche

Question

Ich verwende die Schaltfläche "Zurück zum Anfang" von codyhouse.co, um eine JavaScript-Schaltfläche unten rechts auf allen meinen Seiten zur Verfügung zu stellen.

Ich benutze auch eine Javascript Live Chat/Support-Taste, die auch in der unteren rechten Ecke aller Seiten der Website erscheint.

Ein Problem, das ich habe, ist, dass sie miteinander kollidieren. Ich habe versucht, die CSS der 'Zurück zum Anfang'-Taste anzupassen, um entweder die Chat-Taste zu deaktivieren und eine Ebene über oder unter auf der rechten Seite zu erscheinen, oder um sie auf der linken Seite erscheinen zu lassen. Ich hatte kein Glück.

Im Anschluss an die CSS:

/*top of page CSS*/ 
.cd-top { 


    height: 40px; 
    width: 40px; 
    position: fixed; 
    bottom: 40px; 
    right: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
    /* image replacement properties */ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
    background: #78BE20 url(../images/cd-top-arrow.svg) no-repeat center 50%; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    -moz-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover { 
    -webkit-transition: opacity .3s 0s, visibility 0s 0s; 
    -moz-transition: opacity .3s 0s, visibility 0s 0s; 
    transition: opacity .3s 0s, visibility 0s 0s; 
} 
.cd-top.cd-is-visible { 
    /* the button becomes visible */ 
    visibility: visible; 
    opacity: 1; 
} 

.no-touch .cd-top:hover { 
    background-color: #e86256; 
    opacity: 1; 
} 
@media only screen and (min-width: 768px) { 
    .cd-top { 
    right: 20px; 
    bottom: 20px; 
    } 
} 
@media only screen and (min-width: 1024px) { 
    .cd-top { 
    height: 60px; 
    width: 60px; 
    right: 30px; 
    bottom: 30px; 
    } 
} 

ich die bottom und right Werte versucht haben, anpassen.

Alle Vorschläge sehr geschätzt!

Answer 1

Shift-links

---

dies tun verschieben es links:

statt: right : 10px Änderung left : 10px.

oder um wie viele Pixel auch immer verschoben werden soll.

.cd-top { 
    height: 40px; 
    width: 40px; 
    position: fixed; 
    bottom: 40px; 
    left: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
    /* image replacement properties */ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
    background: #78BE20 url(../images/cd-top-arrow.svg) no-repeat center 50%; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    -moz-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 

Auch Änderungen in Medien CSS:

@media only screen and (min-width: 768px) { 
    .cd-top { 
    left: 20px; 
    bottom: 20px; 
    } 
} 
@media only screen and (min-width: 1024px) { 
    .cd-top { 
    height: 60px; 
    width: 60px; 
    left: 30px; 
    bottom: 30px; 
    } 
} 

Shift-Up

---

zum Hochschalten, nur die unteren Werte in .cd-top und Medien css ändern:

.cd-top { 
    display: inline-block; 
    height: 40px; 
    width: 40px; 
    position: fixed; 
    bottom: 140px; 
    right: 10px; 
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05); 
    /* image replacement properties */ 
    overflow: hidden; 
    text-indent: 100%; 
    white-space: nowrap; 
    background: rgba(232, 98, 86, 0.8) url(../img/cd-top-arrow.svg) no-repeat center 50%; 
    visibility: hidden; 
    opacity: 0; 
    -webkit-transition: opacity .3s 0s, visibility 0s .3s; 
    -moz-transition: opacity .3s 0s, visibility 0s .3s; 
    transition: opacity .3s 0s, visibility 0s .3s; 
} 

@media only screen and (min-width: 768px) { 
    .cd-top { 
    right: 20px; 
    bottom: 120px; 
    } 
} 
@media only screen and (min-width: 1024px) { 
    .cd-top { 
    height: 60px; 
    width: 60px; 
    right: 30px; 
    bottom: 130px; 
    } 
}