Làm cách nào để vô hiệu hóa vị trí: được sửa trong các trang web?

Question

trang web này:

http://nautil.us/

có một tiêu đề thực sự khó chịu mà luôn luôn là trên màn hình và sẽ không di chuyển đi.

Nếu tôi nhấp chuột phải vào nó và 'kiểm tra phần tử' trong firefox, thì tôi thấy rằng css chứa "position: fixed;", và nếu tôi bỏ điều này, tiêu đề sẽ hoạt động và cuộn đi làm.

Có cách nào để Firefox có thể tự động thực hiện việc này hay không, tức là xóa tất cả vị trí: các dòng cố định từ tất cả các trang trước khi hiển thị chúng?

chỉnh sửa -------

Sau khi suy nghĩ một chút, những gì tôi muốn là một bookmarklet sẽ loại bỏ điều này.

Vậy làm thế nào để biến SciMonster của hứa hẹn-looking:

var x = document.querySelectorAll('*'); // get all elements 
for (var i = 0; i< x.length; i++) { 
    if (x[i].style.position == 'fixed') { 
     x[i].style.position = 'static'; 
    } 
} 

vào

javascript:??? 

thích hợp cho đi trong lĩnh vực vị trí của một bookmark firefox?

Với điều kiện giành chiến thắng nếu bạn truy cập http://nautil.us và nhấp vào nút dấu trang, tiêu đề nổi sẽ ngừng trôi nổi và cuộn đi, như thể bạn đã xóa position: fixed; trong trình kiểm tra phần tử.

Answer 1

tôi thấy this answer mà nói thế nào để tìm các yếu tố với một tài sản cụ thể CSS (sử dụng jQuery):

var x = $('.myselector').filter(function() { 
    return this.style.position == 'fixed' 
}); 

Nếu sau đó chúng tôi sử dụng đó quay trở lại thiết lập, chúng ta có thể thiết lập lại các vị trí để tĩnh:

var x = $('*').filter(function() { 
    return this.style.position == 'fixed' 
}).css('position', 'static'); 

Chỉ cần đặt điều này trong một usercript (với jQuery bao gồm) và bạn đã sẵn sàng!

---

Và một giải pháp phi jQuery ...

var x = document.querySelectorAll('*'); // get all elements 
for (var i = 0; i< x.length; i++) { 
    if (x[i].style.position == 'fixed') { 
     x[i].style.position = 'static'; 
    } 
} 

Answer 2

Cảm ơn bạn, Scimonster. Tôi đã sử dụng giải pháp jQuery của bạn, nhưng thay đổi nó để truy vấn cho thẻ tiêu đề (và nhập khẩu jQuery):

var jq = document.createElement('script'); 
jq.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"; 
document.getElementsByTagName('head')[0].appendChild(jq); 

$("header").css('position', 'absolute'); 

Answer 3

này là rất tốt:

https://alisdair.mcdiarmid.org/kill-sticky-headers/

Một tiêu đề dính là một dấu hiệu chắc chắn của công cụ bạn không muốn trên màn hình của bạn, và điều này chỉ phá hủy chúng!

Có thể sửa đổi nó để thay đổi từ cố định thành tĩnh, nhưng tôi chưa tìm thấy trường hợp mà tôi thực sự muốn.

Answer 4

Hai câu hỏi trên stackoverflow và superuser rất giống nhau.

Có thể cho rằng, giải pháp dễ nhất (được đề xuất trong số answers on superuser) là cài đặt this greasemonkey script. Nó có lợi ích là rằng nó cố gắng thông minh bằng cách lặp lại chỉ trên các phần tử html có liên quan và cố gắng nhận ra các cửa sổ bật lên giả và không phải là xóa các phần tử giả mạo . Nó sẽ tự động chạy trên tất cả các trang web đã tải trừ khi bạn chỉnh sửa dòng tiêu đề @include. (Tôi đã không thực sự thử nghiệm nó.)

Nếu bạn muốn có một bookmarklet, sau đó điều này sẽ thực hiện công việc (thử nghiệm trên nautil.us):

javascript:(function(){x=document.querySelectorAll('*');for(i=0;i<x.length;i++){if(getComputedStyle(x[i]).position=="fixed"){x[i].style.position="absolute";}}}()) 

Như một phần thưởng, xem xét rằng tiêu đề css position: sticky đang cũng nảy lên đầu xấu xí của mình, bạn có thể thoát khỏi cả họ và "cố định" yếu tố:

javascript:(function(){x=document.querySelectorAll('*');for(i=0;i<x.length;i++){elementStyle=getComputedStyle(x[i]);if(elementStyle.position=="fixed"||elementStyle.position=="sticky"){x[i].style.position="absolute";}}}()) 

Không nén:

var x = document.querySelectorAll('*'); 
for(var i=0; i<x.length; i++) { 
    elementStyle = getComputedStyle(x[i]); 
    if(elementStyle.position=="fixed" || elementStyle.position=="sticky") { 
     x[i].style.position="absolute"; 
    } 
} 

Answer 5

Cập nhật lại một lần nữa

dung dịch A Vanilla JS:

/* find the topbar by coordinate */ 
var topbar 
var el = document.elementFromPoint(document.documentElement.clientWidth - 200, 20) 
while (el) { 
    if (getComputedStyle(el).position == 'fixed') topbar = el 
    el = el.parentNode; 
    if (el == document.body) break 
} 
if (topbar == undefined) return 

/* disable position:fixed */ 
// topbar.style.position = 'absolute' 
// ↑ this line doesn't work well, because sometime offsetParent is not <body> 
// ↓ workaround 
var paint = function (enforce) { 
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop 
    var threshold = 200 
    if (!enforce && scrollTop > threshold * 3) return 
    var offset = scrollTop/threshold 
    if (offset > 1.2) offset = 1.2 
    topbar.style.transform = 'translateY(-' + offset * 100 + '%)' 
} 
paint(true) // initialize 
document.addEventListener('scroll',() => paint()) 

/* when use JS to frequently change CSS value, disable CSS transition to avoid weird delay */ 
// topbar.style.transition = 'transform 0s' 
// ↑ this line doesn't work because of compatibility 
// ↓ workaround 
topbar.classList.add('remove-topbar') 
var style = document.createElement('style') 
style.innerHTML = '.remove-topbar{transition:transform 0s !important}' 
document.head.appendChild(style) 

UserScript: https://gist.github.com/zcyzcy88/909b77054b88fd69e8a0834b84e7a68b