Question

我试图创建一个浮动按钮，它总是在视觉中但通过使用jquery流畅地流动。我正在查看本教程，为我的网站创建一个。教程链接为http://www.wduffy.co.uk/blog/keep-element-in-view-while-scrolling-using-jquery/。所以我做了所有的步骤，但不知道我搞砸了哪里，它不工作，就像我希望它工作。

请参阅代码段

   $().ready(function() {
        var $scrollingDiv = $(".floatBtn");

        $(window).scroll(function(){            
            $scrollingDiv
                .stop()
                .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );          
        });
    });

.floatBtn{
    position: absolute;
    float: right;
    right: 0;
    text-align: right;
    z-index: 5;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<p>
Lorem ipsum dolor sit amet, an has dicat aperiri delicata, te maiorum omittantur theophrastus vim, ut quot sapientem reprehendunt eam. Exerci omnium eu eum, legendos explicari sed ad. Apeirian mandamus vix et. Tollit dolorem has at, modus abhorreant mediocritatem an pri.

At eos omnes propriae mandamus, has modo denique dignissim ea. Causae dignissim assentior has id. Ei nec exerci eruditi scribentur. Vim regione repudiandae et, mea bonorum fabulas cu. Cum et hinc summo, at vidisse signiferumque ius, nec mucius disputando ea. Ei mei malis virtute facilis, ex dicam indoctum pericula his.

An per solet contentiones. Ut posse idque accommodare eam, tation denique dignissim sea ut, at tritani molestie mea. Per possit philosophia in, putant contentiones usu ne, sale tation ius cu. Percipit eloquentiam theophrastus et eum. At nec splendide rationibus delicatissimi, te meis labore consequuntur sea, ne debet sententiae constituam pri.

Utamur adipisci sadipscing has ex. Tantas voluptatibus ius ei, vel definiebas signiferumque at. Lorem voluptaria te vel, cum ne consequuntur necessitatibus. Ex suas probo propriae cum. Duo ullum abhorreant dissentiet no. Fuisset consequat vim no.

Te atqui eligendi mei. Et his illum elaboraret, dicam tempor euripidis no sea. Id vis postea delicata qualisque, id mea viderer euismod, nam ex laudem interesset. Ea debet pericula sea, laudem patrioque vituperatoribus no duo. Vero simul eleifend sit ei, per ea case insolens.

Vim te stet constituto vituperatoribus, est et illud theophrastus. Et utamur quaeque his, ex vix paulo tation doming. Te ius purto deserunt molestiae, te sea fabulas suscipit. His ei quot sententiae interesset, ad sed quem nullam. Soleat deseruisse no mei, et interesset vituperatoribus pri.

In vim putent prompta quaestio, eius adversarium eam ea. Cu modo zril suscipiantur eos, propriae intellegat at sea. An sonet pertinacia efficiendi quo, pri enim fuisset an. Ornatus omittam consequat ne qui. Has sale prompta ut, nec elit everti insolens cu. Eu causae appareat deterruisset per, ea eam quod minimum inimicus.

Te ius agam consequuntur signiferumque, in usu aeque simul propriae, ea qui ferri audire oporteat. Vim ubique omnesque periculis te, duo diam vocent ornatus ea. Nam in omnes legere euismod, in mei consulatu accommodare. Ei est decore habemus postulant. At sea ludus quando.

Reque voluptaria ea usu. Diceret recusabo duo an, eos iusto ocurreret te, no commune vituperatoribus vis. Erat regione moderatius te sea, vis eu sonet altera scribentur. Fastidii repudiandae sea ei. Qui at habemus moderatius disputationi. Eos dico esse dicant eu, liber utamur nec ei.

His euismod fastidii in, dolor sensibus repudiare pri ex. Nec wisi adolescens scriptorem in, in liber labitur eos. Id dicant impedit probatus est, ne usu placerat singulis complectitur, duo at antiopam appellantur. Posse civibus accusata eu vel, reque illum incorrupte sit an. Usu in reque verterem adipiscing, eu mel tollit malorum virtute.

Ei nec dicam phaedrum expetendis, has fastidii voluptaria deseruisse ea, dolorem inimicus tincidunt at sea. Aliquando interpretaris mel an. Usu veri accusata salutandi eu. In solet numquam vis, eam elit audire regione id. Dolor mandamus posidonium an vel.

Alia magna quando an est. An vitae probatus sed, qui movet invenire ocurreret in. Graeci legendos no usu, duo ad doctus disputando ullamcorper, eum vide paulo utroque ad. Qui aperiri consetetur at, possim assentior percipitur sea in. Stet dolorum id sit.

Vix ei civibus recusabo, ullum qualisque eu sit, vis ex impetus scripserit. Usu scripta volutpat consectetuer et. Ne sit eros cotidieque, in esse reque nostrud pro, eu periculis adolescens vix. Pri cu libris dolorem eligendi, nam id mucius sanctus.

Atqui invenire vim in, no usu possim tractatos principes. Invidunt probatus est te, eos ea error sententiae, id alterum nostrum sea. Mollis moderatius omittantur has ex, falli movet te has. At viris commodo deserunt quo.

Eu tale putent referrentur vix, cu quo admodum voluptatum appellantur. Usu ne ignota prodesset, ipsum quando an eos, dolores abhorreant an quo. Cu assum consequat ius, lobortis consequat eos no, ne mea suas congue viderer. Semper latine eripuit in quo. Vel ex dictas accusam abhorreant. Vel aliquando pertinacia omittantur et, duo ei nonumes voluptatibus, eum id scripta convenire.
</p>
<div id="scrollingDiv" class="floatBtn">
        <a href="signin.php">
            <img src="http://placehold.it/89x48" style="width: 89px; height: 48px;"></a>
</div>

如果您可以看到，当您向下滚动时，浮动按钮会向下滚动而不是停留在查看区域，这不是我想要的。请帮忙！提前谢谢

Answer 1

如果您想要始终可见的按钮，则需要将其定位并固定位置。然后，您将使用视口定位此元素，以便它始终可见。我会给你一些例如（没有jquery）。 BTW。不要将jquery用于那样的东西

.floatBtn{
   display: block;
   position: fixed;
   width: 200px;
   height:200px;
   color: red;
   border: 3px solid black;
   top: 20px;
 }

如何创建一个流畅的浮动按钮？

1 个答案: