Cố định tiêu đề jQuery Mobile

Có thể nhận tiêu đề cố định jQuery Mobile, với hàng được đặt ở trên cùng như trong liên kết bên dưới không?Cố định tiêu đề jQuery Mobile

http://www.expedia.com.au/p/promos/Beach-Breaks.htm

Nếu bạn thấy liên kết ở trên hình ảnh tiêu đề đi lên và tiêu đề ra và nhận được cố định trên đầu trang.

Trước khi di chuyển lên enter image description here

Sau khi di chuyển lên enter image description here

Tôi đã thử sử dụng iScroll rằng tôi có thể lấy tiêu đề cố định nhưng không phải là hiệu ứng như trong liên kết ở trên. Có bất kỳ liên kết hoặc hướng dẫn nào về vấn đề này không? Cảm ơn bạn rất nhiều vì đã dành thời gian và trợ giúp trước.

Nguồn

2012-08-14 Jay Mayu

này sẽ cung cấp cho bạn một khởi đầu tốt [làm thế nào để giữ jquery tiêu đề điện thoại di động và chân cố định] [1] [1]: http://stackoverflow.com/questions/4724068/ làm thế nào để giữ-jquery-mobile-header-và-footer-cố định – rahul

@rahul: Không, nó khác. – nhahtdh

Thật không may, không có gì trong jQuery Mobile sẽ cho phép bạn đạt được chức năng trên khỏi hộp. Bạn có thể có [tiêu đề cố định] (http://jsbin.com/iyowog/1/) (*** thay đổi kích thước cửa sổ để thực hiện cuộn trang ***), nhưng không phải là một trang bắt đầu từ nửa trang xuống và sau đó trở thành cố định . – Jeemusu

Ok, vậy bạn đã cho tôi tự hỏi về làm thế nào tôi có thể thực hiện điều này trong jQuery Mobile vì nó có thể có ích trong một dự án tôi đang làm việc trên.

Sử dụng JQuery Waypoints, bạn có thể kiểm tra thời điểm các yếu tố nhất định chạm đầu trang và hướng trang nào đang di chuyển tại thời điểm đó. Tôi đã thiết lập các jsbin sau để chỉ cho bạn một giải pháp khả thi:

http://jsbin.com/iyowog/3/edit

Mã waypoints là rất đơn giản, chỉ bao gồm các kịch bản ở dưới cùng của trang web của bạn trước khi bạn đóng thẻ cơ thể. Sau đó, bạn có thể khởi tạo plugin bằng .waypoint(). Tôi đã sử dụng đoạn mã sau trong ví dụ của tôi, sửa chữa tiêu đề khi cuộn xuống và tháo nó khi bạn cuộn ngược trở lại qua điểm ban đầu của nó một lần nữa.

$('#header').waypoint(function(event, direction) { 

    if (direction === 'down') { 
     $('#header').attr('data-position', 'fixed'); 
     $('#header').addClass('ui-header-fixed'); 

    } else { 
     $('#header').attr('data-position', ''); 
     $('#header').removeClass('ui-header-fixed'); 
    } 
});

Phần tốt nhất là động ở đầu trang sẽ có thể biết khi nào nó ở đầu trang.

Nguồn

2012-08-14 06:07:20 Jeemusu

Bạn có thể thử mã này.Điều này sẽ hoạt động.Vui lòng lưu ý rằng tôi chưa thử nghiệm trong trình duyệt trên điện thoại di động. Hãy cho tôi biết nếu điều đó có ích.

<!DOCTYPE html> 
<html> 
    <head> 
    <title>Page Title</title> 

    <meta name="viewport" content="width=device-width, initial-scale=1"> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" /> 
    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script> 
     $(document).on("pageshow","#page",function(){ 
      $(this).css("top","100px"); 
      $(".ui-header-fixed").css("position","absolute"); 
     }) 

     $(window).scroll(function(event){ 
      if($(window).scrollTop() >= 100){ 
       $(".ui-header-fixed").css("position","fixed"); 
      } 
      else{ 
       $(".ui-header-fixed").css("position","absolute"); 
      } 
     }); 
    </script> 
    <script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"></script> 
</head> 
<body> 
<div style="height:100px;background-color:#ccc"></div> 
<div data-role="page" id="page"> 

    <div data-role="header" data-position="fixed"> 
     <h1>Page Title</h1> 
    </div><!-- /header --> 

    <div data-role="content" style="height:1500px;">  
     <p>Lorem ipsum dolor</p>   
    </div><!-- /content --> 

</div><!-- /page --> 

</body> 
</html>

Một bản demo ở đây - http://jsfiddle.net/Xg86Z/

Nguồn

2012-08-14 06:05:32 user700284

Cố định tiêu đề jQuery Mobile

Trả lời

Các vấn đề liên quan