нокаут, если привязка к jquery mobile static header сохраняет пробел

Question

Моя страница имеет статический заголовок (jqm), который условно отображается в зависимости от параметра. Ну, привязка работает, то есть отображается условно, содержимое страницы не перемещается вверх, когда заголовок не отображается.

Я также попробовал привязку css для установки отображения без везения.

HTML:

<div class="home-header" data-role="header" data-position="fixed" data-theme="c" data-bind="if: isFish, style: {display:isFish()? 'block':'none'} "> 
    <div class="logo" style="margin:0 auto;"></div> 
    </div> 
    <div>Content starts here</div> 
    <div data-bind="text:count"></div> 
    <div data-bind="text:isFish"></div> 

JavaScript:

var viewModel = new function() { 
    var self = this; 

    if (sessionStorage.clickcount) { 
    sessionStorage.clickcount = Number(sessionStorage.clickcount) + 1; 
    } else { 
    sessionStorage.clickcount = 1; 
    } 

    self.count = ko.observable(sessionStorage.clickcount); 
    self.isFish = ko.computed(function() { 
    return self.count() % 2 ==0; 
    }); 

}; //viewModel 

$(document).ready(function() { 
    ko.applyBindings(viewModel); 
}); 

Here's the demo.

Нажмите кнопку «Выполнить» несколько раз, чтобы увидеть, что изображение рыбы скрыто или отображается в зависимости от количества.

Я хочу, чтобы строка «Содержимое начинается здесь» на самом верху, когда изображение не отображается. Как это сделать? Заранее спасибо.

Answer 1

вы можете попробовать, как этот

<!-- ko if: isFish--> 
<div class="home-header" data-role="header" data-position="fixed" data-theme="c"> 
    <div class="logo" style="margin:0 auto;"></div> 
</div> 
<!--/ko-->