Да, этот вопрос слишком широк. Но меня это заинтересовало. Вот грубый пример того, как его выполнить.
Я попытался объяснить, что происходит с комментариями. Конечно, это можно сделать лучше, но я надеюсь, что это поможет.
// init on page ready
$(function() {
// check on each scroll event
$(window).scroll(function(){
// elements to be tested
var _elements = $('.ele');
// get most visible element (result)
var ele = findMostVisible(_elements);
});
});
function findMostVisible(_elements) {
// find window top and bottom position.
var wtop = $(window).scrollTop();
var wbottom = wtop + $(window).height();
var max = 0; // use to store value for testing
var maxEle = false; // use to store most visible element
// find percentage visible of each element
_elements.each(function(){
// get top and bottom position of the current element
var top = $(this).offset().top;
var bottom = top + $(this).height();
// get percentage of the current element
var cur = eleVisible(top, bottom, wtop, wbottom);
// if current element is more visible than previous, change maxEle and test value, max
if(cur > max) {
max = cur;
maxEle = $(this);
}
});
return maxEle;
}
// find visible percentage
function eleVisible(top, bottom, wtop, wbottom) {
var wheight = wbottom - wtop;
// both bottom and top is vissible, so 100%
if(top > wtop && top < wbottom && bottom > wtop && bottom < wbottom)
{
return 100;
}
// only top is visible
if(top > wtop && top < wbottom)
{
return 100 + (wtop - top) / wheight * 100;
}
// only bottom is visible
if(bottom > wtop && bottom < wbottom)
{
return 100 + (bottom - wbottom) / wheight * 100;
}
// element is not visible
return 0;
}
Рабочий пример - https://jsfiddle.net/exabyssus/6o30sL24/
Можете ли вы использовать ToggleButton вместо Button?
layout.xml
<ToggleButton
android:layout_width="wrap_content"
android:layout_height="wrap_content"
android:id="@+id/button"
android:textOff="done"
android:textOn="done"
android:background="@drawable/test_selector"/>
test_selector.xml
<?xml version="1.0" encoding="utf-8"?>
<selector xmlns:android="http://schemas.android.com/apk/res/android">
<!-- on checked -->
<item
android:state_checked="true"
android:state_pressed="false"
android:drawable="@drawable/button_bg_selected" />
<!-- normal -->
<item
android:state_checked="false"
android:state_pressed="false"
android:drawable="@drawable/button_bg_normal" />
<!-- pressed -->
<item
android:state_pressed="true"
android:drawable="@drawable/button_bg_pressed" />
</selector>