[Hỏi đáp] Làm quảng cáo trượt

avatar

nimate95
10
1
Punbb
Thành viên mới
Thành viên mới

Bài viết :
5
Points :
10
Like :
1
Punbb
mình đang tính làm quảng cáo kiểu trượt thay đổi giữa absolute và fixed nhưng ko biết làm như thế nào
mong mọi người giúp đỡ
 Trả lời bài viết
avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ
Bạn dùng sticky nhé :)

Tạo js :

ACP >> Modules >> HTML & JAVASCRIPT >> Javascript Codes >> Create a new javascript:
Title: Sticky Plugin
Placement: In all the pages
Javascript Code * :

Code:
// Sticky Plugin v1.0.0 for jQuery
// =============
// Author: Anthony Garand
// Improvements by German M. Bravo (Kronuz) and Ruud Kamphuis (ruudk)
// Improvements by Leonardo C. Daronco (daronco)
// Created: 2/14/2011
// Date: 2/12/2012
// Website: http://labs.anthonygarand.com/sticky
// Description: Makes an element on the page stick on the screen as you scroll
// It will only set the 'top' and 'position' of your element, you
// might need to adjust the width in some cases.

(function($) {
  var defaults = {
      topSpacing: 0,
      bottomSpacing: 0,
      className: 'is-sticky',
      wrapperClassName: 'sticky-wrapper',
      center: false,
      getWidthFrom: ''
    },
    $window = $(window),
    $document = $(document),
    sticked = [],
    windowHeight = $window.height(),
    scroller = function() {
      var scrollTop = $window.scrollTop(),
        documentHeight = $document.height(),
        dwh = documentHeight - windowHeight,
        extra = (scrollTop > dwh) ? dwh - scrollTop : 0;

      for (var i = 0; i < sticked.length; i++) {
        var s = sticked[i],
          elementTop = s.stickyWrapper.offset().top,
          etse = elementTop - s.topSpacing - extra;

        if (scrollTop <= etse) {
          if (s.currentTop !== null) {
            s.stickyElement
              .css('position', '')
              .css('top', '');
            s.stickyElement.parent().removeClass(s.className);
            s.currentTop = null;
          }
        }
        else {
          var newTop = documentHeight - s.stickyElement.outerHeight()
            - s.topSpacing - s.bottomSpacing - scrollTop - extra;
          if (newTop < 0) {
            newTop = newTop + s.topSpacing;
          } else {
            newTop = s.topSpacing;
          }
          if (s.currentTop != newTop) {
            s.stickyElement
              .css('position', 'fixed')
              .css('top', newTop);

            if (typeof s.getWidthFrom !== 'undefined') {
              s.stickyElement.css('width', $(s.getWidthFrom).width());
            }

            s.stickyElement.parent().addClass(s.className);
            s.currentTop = newTop;
          }
        }
      }
    },
    resizer = function() {
      windowHeight = $window.height();
    },
    methods = {
      init: function(options) {
        var o = $.extend(defaults, options);
        return this.each(function() {
          var stickyElement = $(this);

          var stickyId = stickyElement.attr('id');
          var wrapper = $('<div></div>')
            .attr('id', stickyId + '-sticky-wrapper')
            .addClass(o.wrapperClassName);
          stickyElement.wrapAll(wrapper);

          if (o.center) {
            stickyElement.parent().css({width:stickyElement.outerWidth(),marginLeft:"auto",marginRight:"auto"});
          }

          if (stickyElement.css("float") == "right") {
            stickyElement.css({"float":"none"}).parent().css({"float":"right"});
          }

          var stickyWrapper = stickyElement.parent();
          stickyWrapper.css('height', stickyElement.outerHeight());
          sticked.push({
            topSpacing: o.topSpacing,
            bottomSpacing: o.bottomSpacing,
            stickyElement: stickyElement,
            currentTop: null,
            stickyWrapper: stickyWrapper,
            className: o.className,
            getWidthFrom: o.getWidthFrom
          });
        });
      },
      update: scroller,
      unstick: function(options) {
        return this.each(function() {
          var unstickyElement = $(this);

          removeIdx = -1;
          for (var i = 0; i < sticked.length; i++)
          {
            if (sticked[i].stickyElement.get(0) == unstickyElement.get(0))
            {
                removeIdx = i;
            }
          }
          if(removeIdx != -1)
          {
            sticked.splice(removeIdx,1);
            unstickyElement.unwrap();
            unstickyElement.removeAttr('style');
          }
        });
      }
    };

  // should be more efficient than using $window.scroll(scroller) and $window.resize(resizer):
  if (window.addEventListener) {
    window.addEventListener('scroll', scroller, false);
    window.addEventListener('resize', resizer, false);
  } else if (window.attachEvent) {
    window.attachEvent('onscroll', scroller);
    window.attachEvent('onresize', resizer);
  }

  $.fn.sticky = function(method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method ) {
      return methods.init.apply( this, arguments );
    } else {
      $.error('Method ' + method + ' does not exist on jQuery.sticky');
    }
  };

  $.fn.unstick = function(method) {
    if (methods[method]) {
      return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
    } else if (typeof method === 'object' || !method ) {
      return methods.unstick.apply( this, arguments );
    } else {
      $.error('Method ' + method + ' does not exist on jQuery.sticky');
    }

  };
  $(function() {
    setTimeout(scroller, 0);
  });
})(jQuery);

Tạo 1 js nữa :

Javascript code :
Code:
$(document).ready(function(){
    $("#abcxyzvcl").sticky({topSpacing:0}); // Id, Class của phần tử sẽ cuộn theo.
});
 Trả lời bài viết
avatar

nimate95
10
1
Punbb
Thành viên mới
Thành viên mới

Bài viết :
5
Points :
10
Like :
1
Punbb
Tạo 1 js nữa :

Javascript code :
Code:
$(document).ready(function(){
    $("#abcxyzvcl").sticky({topSpacing:0}); // Id, Class của phần tử sẽ cuộn theo.
});
Mình ko hiểu lắm về phần này. Bạn có thể giải thích rõ được ko
 Trả lời bài viết
avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ
@nimate9 đã viết:
Tạo 1 js nữa :

Javascript code :
Code:
$(document).ready(function(){
    $("#abcxyzvcl").sticky({topSpacing:0}); // Id, Class của phần tử sẽ cuộn theo.
});
Mình ko hiểu lắm về phần này. Bạn có thể giải thích rõ được ko

Ví dụ nhé bạn Very Happy
Code:
https://jsfiddle.net/pacc420y/

Còn bạn vẫn chưa hiểu thì đưa demo mình sửa hộ Very Happy
 Trả lời bài viết
avatar

nimate95
10
1
Punbb
Thành viên mới
Thành viên mới

Bài viết :
5
Points :
10
Like :
1
Punbb
Mình làm được rồi nhưng mà có cách nào cho nó chạy đến chỗ nhất định ko
nó chạy xuống hết trang luôn @@
 Trả lời bài viết
avatar

Giựt238
388
80
Punbb
Cẩn thận
Éo có đối thủ
Thành viên thân thiết
Thành viên thân thiết

Bài viết :
238
Points :
388
Like :
80
Punbb
Cẩn thận
Éo có đối thủ
Bạn tự mày mò nhé :
Code:
https://jsfiddle.net/fdwxrcd8/
 Trả lời bài viết
avatar

nimate95
10
1
Punbb
Thành viên mới
Thành viên mới

Bài viết :
5
Points :
10
Like :
1
Punbb
mình làm được rồi, cảm ơn bạn nhiều ^^
 Trả lời bài viết
Điểm 4.6/5 dựa vào 87 đánh giá

Có Thể Bạn Quan Tâm

Đang tải...