jquery.floatelement.js 2.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. (function (factory) {
  2. 'use strict';
  3. if (typeof define === 'function' && define.amd) {
  4. define([
  5. 'jquery'
  6. ], factory);
  7. } else {
  8. factory(window.jQuery);
  9. }
  10. }(function ($) {
  11. 'use strict';
  12. var $window = $(window);
  13. $.fn.themePluginFloatElement = function(options) {
  14. var settings = {
  15. startPos: "top",
  16. speed: 3,
  17. horizontal: false,
  18. transition: false
  19. };
  20. var $el, $options;
  21. function initialize(t, options) {
  22. return t.data("__floatElement") ? this : ($el = t,
  23. setData(),
  24. setOptions(options),
  25. build(),
  26. this)
  27. }
  28. function setData() {
  29. return $el.data("__floatElement")
  30. }
  31. function setOptions(options) {
  32. return $options = $.extend(!0, {}, settings, options, {
  33. wrapper: $el
  34. })
  35. }
  36. function build() {
  37. var t, o = $options.wrapper, s = $(window);
  38. return $options.style && o.attr("style", $options.style),
  39. s.width() > 767 && ("none" == $options.startPos ? t = "" : "top" == $options.startPos ? (o.css({
  40. top: 0
  41. }),
  42. t = "") : (o.css({
  43. bottom: 0
  44. }),
  45. t = "-"),
  46. $options.transition && o.css({
  47. transition: "ease transform 500ms"
  48. }),
  49. movement(t),
  50. s.on("scroll", function() {
  51. movement(t)
  52. }))
  53. }
  54. function movement(t) {
  55. var i = $($options.wrapper)
  56. , o = $(window)
  57. , s = o.scrollTop()
  58. , n = 100 * (i.offset().top - s) / o.height();
  59. $options.horizontal ? i.css({
  60. transform: "translate3d(" + t + n / $options.speed + "%, " + t + n / $options.speed + "%, 0)"
  61. }) : i.css({
  62. transform: "translate3d(0, " + t + n / $options.speed + "%, 0)"
  63. })
  64. }
  65. initialize(this, options);
  66. return this;
  67. }
  68. }));